<template>
    <div style="height: 100%" v-loading="loading">
        <VueDragResize :isActiyve="true" :w="1100" :h="30" v-on:resizing="resize" v-on:dragging="resize"
            :isResizable="false" :parentLimitation="true" :parentW="w" :parentH="h" :x="160" :y="45" style="z-index: 999">
            <div class="tool-copy">
                <div class="tool-bar2-copy" :class="{ red: changeColor == 15 }" @click="sreenFull()" title="窗口全屏">
                    <i class="el-icon-full-screen"></i> 全屏
                </div>
                <div class="tool-bar2-copy" :class="{ red: changeColor == 17 }" title="复位" @click="goHome">
                    <i class="el-icon-refresh-left"></i> 复位
                </div>
                <!-- 显示重置之后的倍数 -->
                <div id="viewZoomNumber" class="tool-bar2" style="margin-top: 8px">
                    {{ viewZoomNumber }}
                </div>
                <div class="tool-bar2-copy" :class="{ red: changeColor == 13 }" @click="screenshot()" title="截图">
                    <i class="el-icon-crop"></i> 截图
                </div>
                <div class="cut-line-copy"></div>
                <div class="tool-bar2-copy" :class="{ red: changeColor == 40 }" title="测距工具"
                    @click="toggleMeasureDistanceOnly">
                    <font-awesome-icon :icon="['fas', 'ruler']" size="sm" />测距
                </div>
                <div class="tool-bar2-copy" :class="{ red: changeColor == 10 }" title="周长、面积测量工具"
                    @click="toggleMeasureArea">
                    <font-awesome-icon :icon="['fas', 'square']" size="sm" />测面积
                </div>
                <div class="tool-bar2-copy" :class="{ red: changeColor == 11 }" title="清除" @click="clearMeasure">
                    <font-awesome-icon :icon="['fas', 'brush']" size="sm" />橡皮
                </div>
                <div class="cut-line-copy"></div>
                <div class="tool-bar2-copy" :class="{ red: changeColor == 5 }" title="画笔标注" @click="togglePencil">
                    <font-awesome-icon :icon="['fas', 'pencil-alt']" size="sm" />画笔
                </div>
                <div class="tool-bar2-copy" :class="{ red: changeColor == 37 }" title="MH_index" @click="MHtogglePencil"
                    style="margin-top: 8px">
                    MH
                </div>
                <div class="tool-bar2-copy" :class="{ red: changeColor == 21 }" @click="toggleCircle" title="圆形标注">
                    <i class="el-icon-help"></i>圆圈
                </div>
                <el-switch style="margin: 6px; float: left" v-model="switchValue.groupMark" active-text="组标注"
                    inactive-text></el-switch>
                <div class="cut-line-copy"></div>
                <div class="tool-bar2-copy" :class="{ red: changeColor == 12 }" title="智能预测" @click="drawerAi()"
                    style="margin-top: 8px">
                    AI
                </div>
                <div class="tool-bar2-copy" :class="{ red: changeColor == 39 }" title="MHAI" @click="drawerMHAi()"
                    style="margin-top: 8px">
                    MHAI
                </div>
                <div class="tool-bar2-copy" :class="{ red: changeColor == 36 }" title="诊断依据"
                    @click="showClinicalDialogVisible()">
                    临床
                </div>
                <div class="tool-bar2-copy" :class="{ red: changeColor == 35 }" title="收藏" @click="collectChange">
                    <i class="el-icon-star-off"></i>
                    {{ !!isCollected ? "取消收藏" : "收 藏" }}
                </div>
            </div>
        </VueDragResize>
        <div class="overlay" v-show="pathologyId">
            <div class="tool-bar1" style="font-size: 20px" :class="{ red: changeColor == 14 }" title="切片重扫"
                @click="sliceRescan">
                <i class="el-icon-folder-delete"></i>
            </div>
            <div class="tool-bar3" :class="{ red: changeColor == 2 }" title="诊断列表" v-if="urlHaspDiagnosisType">
                <font-awesome-icon :icon="['fas', 'user-friends']" size="lg" @click="patienterListMethod" />
            </div>
            <div class="tool-bar3" v-if="urlHaspDiagnosisType">
                <div style="margin-right: 3px" :class="{ red: changeColor == 1 }" title="上一个病人" @click="diagnosisLast()">
                    <font-awesome-icon :icon="['fas', 'angle-left']" size="lg" />
                </div>
                <div style="margin-left: 3px" :class="{ red: changeColor == 3 }" title="下一个病人" @click="diagnosisNext()">
                    <font-awesome-icon :icon="['fas', 'angle-right']" size="lg" />
                </div>
            </div>

            <div class="tool-bar1" :class="{ red: changeColor == 4 }" title="诊断详情">
                <font-awesome-icon :icon="['fas', 'file-alt']" size="lg" @click="patienterDetailMethod" />
            </div>

            <!-- 分割线 -->
            <div class="cut-line"></div>
            <div class="tool-bar1" style="font-size: 20px" :class="{ red: changeColor == 29 }"
                @click="pictureToolPanelShow(2)" title="画笔工具">
                <i class="el-icon-edit-outline"></i>
            </div>
            <div class="cut-line"></div>
            <div class="tool-bar1" style="font-size: 20px" :class="{ red: changeColor == 30 }"
                @click="pictureToolPanelShow(1)" title="切片工具">
                <i class="el-icon-menu"></i>
            </div>
            <div class="tool-bar1" style="font-size: 20px" :class="{ red: changeColor == 31 }"
                @click="pictureToolPanelShow(3)" title="色彩工具">
                <i class="el-icon-picture-outline-round"></i>
            </div>

            <div class="tool-bar1" style="font-size: 20px" :class="{ red: changeColor == 32 }"
                @click="pictureToolPanelShow(4)" title="设置">
                <i class="el-icon-setting"></i>
            </div>
            <div class="cut-line"></div>
            <div class="tool-bar1" :class="{ red: changeColor == 12 }" title="智能预测" @click="drawerAi()">
                <span class="tool-icon ai-icon">AI</span>
            </div>
            <div class="tool-bar1" :class="{ red: changeColor == 24 }" title="AI分析列表" @click="AIEvaluation()">
                <i class="el-icon-notebook-2"></i>
            </div>
            <div class="cut-line"></div>
            <div class="tool-bar1" :class="{ red: changeColor == 33 }" title="切片信息" @click="isShowSliceInfo()">
                <i class="el-icon-reading"></i>
            </div>
            <div class="tool-bar1" :class="{ red: changeColor == 34 }" title="诊断依据" @click="isShowDiagnosticBasis()">
                <i class="el-icon-notebook-1"></i>
            </div>
            <div class="tool-bar1" :class="{ red: changeColor == 38 }" title="MH" @click="getMhIndexList">
                MH
            </div>
            <!-- <div class="tool-bar1" :class="{ red:changeColor == 20}" title="智能分析"  @click="analysisAI()">
                <div class="keyword" style="margin-left: 20px;">F4</div>
                <font-awesome-icon :icon="['fas', 'brain']"  size="lg"/>
      </div>-->
            <!--<p id="predictAI" class="predictAI"></p>-->
        </div>
        <div class="divCoordinateColor" v-if="isColorPanelShow">
            <div class="block">
                <el-row>
                    <el-col :span="6" style="padding-top: 8px">
                        <span style="padding-top: 2px; padding-left: 2px; color: #fff">对比度</span>
                    </el-col>
                    <el-col :span="18">
                        <el-slider v-model="coordinateColor.contrast" @input="onContrastSlideChange"></el-slider>
                    </el-col>
                </el-row>
            </div>
            <div class="block">
                <el-row>
                    <el-col :span="6" style="padding-top: 8px; color: #fff">
                        <span class="demonstration">亮度</span>
                    </el-col>
                    <el-col :span="18">
                        <el-slider v-model="coordinateColor.light" @input="onLightSlideInput"></el-slider>
                    </el-col>
                </el-row>
            </div>
            <div class="block">
                <el-row>
                    <el-col :span="6" style="padding-top: 8px; color: #fff">
                        <span class="demonstration">Gama</span>
                    </el-col>
                    <el-col :span="18">
                        <el-slider v-model="coordinateColor.gama" @input="onGamaSlideInput"></el-slider>
                    </el-col>
                </el-row>
            </div>
            <!--            <div class="block">-->
            <!--                <el-row>-->
            <!--                    <el-col :span="6" style="padding-top:8px"><span class="demonstration">红</span></el-col>-->
            <!--                    <el-col :span="18">-->
            <!--                        <el-slider v-model="coordinateColor.red"></el-slider>-->
            <!--                    </el-col>-->
            <!--                </el-row>-->
            <!--            </div>-->
            <!--            <div class="block">-->
            <!--                <el-row>-->
            <!--                    <el-col :span="6" style="padding-top:8px"><span class="demonstration">黄</span></el-col>-->
            <!--                    <el-col :span="18">-->
            <!--                        <el-slider v-model="coordinateColor.yellow"></el-slider>-->
            <!--                    </el-col>-->
            <!--                </el-row>-->
            <!--            </div>-->
            <!--            <div class="block">-->
            <!--                <el-row>-->
            <!--                    <el-col :span="6" style="padding-top:8px"><span class="demonstration">蓝</span></el-col>-->
            <!--                    <el-col :span="18">-->
            <!--                        <el-slider v-model="coordinateColor.blue"></el-slider>-->
            <!--                    </el-col>-->
            <!--                </el-row>-->
            <!--            </div>-->
        </div>

        <div class="divPictureHandle" v-if="isSlicePanelShow">
            <div class="tool-bar2" :class="{ red: changeColor == 18 }" title="右旋">
                <font-awesome-icon @click="rotateRight" :icon="['fas', 'redo']" size="lg" />
            </div>
            <!-- <div class="tool-bar-degree" style="width: 40px">
                <el-input size="mini" v-model.number="viewerAngleCopy"></el-input>
      </div>-->
            <div class="tool-bar2" :class="{ red: changeColor == 19 }" title="左旋">
                <font-awesome-icon @click="rotateLeft" :icon="['fas', 'undo']" size="lg" />
            </div>
            <div class="tool-bar2" :class="{ red: changeColor == 13 }" @click="screenshot()" title="截图">
                <font-awesome-icon :icon="['fas', 'crop']" size="lg" />
            </div>
            <div class="tool-bar2" :class="{ red: changeColor == 15 }" style="font-size: 25px" @click="sreenFull()"
                title="窗口全屏">
                <i class="el-icon-full-screen"></i>
            </div>

            <div class="tool-bar2" :class="{ red: changeColor == 16 }" data-toggle="modal" data-target="#myModal"
                @click="hotkeyMethods" title="快捷键">
                <font-awesome-icon :icon="['fas', 'keyboard']" size="lg" />
            </div>

            <div class="tool-bar2" :class="{ red: changeColor == 17 }" title="重置">
                <font-awesome-icon @click="goHome" :icon="['fas', 'globe-asia']" size="lg" />
            </div>

            <div class="tool-bar2" :class="{ red: changeColor == 9 }" title="测距工具">
                <font-awesome-icon :icon="['fas', 'ruler']" size="lg" @click="toggleMeasureDistance" />
            </div>
            <div class="tool-bar2" :class="{ red: changeColor == 10 }" title="周长、面积测量工具">
                <font-awesome-icon :icon="['fas', 'square']" size="lg" @click="toggleMeasureArea" />
            </div>
            <div class="tool-bar2" style="font-size: 25px" :class="{ red: changeColor == 25 }" @click="electronicPointer"
                title="教鞭">
                <i class="el-icon-aim"></i>
            </div>
            <div class="tool-bar2" style="font-size: 25px" :class="{ red: changeColor == 26 }" title="宫格布局" id="gridLayOut">
                <i class="el-icon-s-grid" @click="gridLayout"></i>
            </div>
            <div class="cut-line" style="float: right"></div>
            <!-- 显示重置之后的倍数 -->
            <div id="viewZoomNumber" class="tool-bar2">
                {{ viewZoomNumber }}
            </div>
        </div>
        <div class="divMarkLabelHandle" v-if="isPencilPanelShow">
            <div class="tool-bar2" :class="{ red: changeColor == 5 }" title="画笔标注">
                <font-awesome-icon :icon="['fas', 'pencil-alt']" size="lg" @click="togglePencil" />
            </div>
            <div class="tool-bar2" :class="{ red: changeColor == 6 }" title="矩形标注">
                <font-awesome-icon :icon="['fas', 'vector-square']" size="lg" @click="toggleRectangle" />
            </div>
            <div class="tool-bar2" :class="{ red: changeColor == 7 }" title="多边形标注">
                <font-awesome-icon :icon="['fas', 'draw-polygon']" size="lg" @click="togglePolygon" />
            </div>
            <div class="tool-bar2" style="font-size: 25px" :class="{ red: changeColor == 21 }" @click="toggleCircle"
                title="圆形标注">
                <i class="el-icon-help"></i>
            </div>
            <div class="tool-bar2" style="font-size: 25px" :class="{ red: changeColor == 22 }" @click="togglePencilLine"
                title="涂抹标注">
                <i class="el-icon-edit"></i>
            </div>

            <div class="tool-bar2" style="font-size: 25px" :class="{ red: changeColor == 23 }" @click="toggleArrow"
                title="箭头">
                <i class="el-icon-top-right"></i>
            </div>
            <div class="tool-bar2" :class="{ red: changeColor == 8 }" title="隐藏标注">
                <font-awesome-icon :icon="['fas', 'eye-slash']" size="lg" @click="hideCallout" v-if="this.ifhideCallout" />
                <font-awesome-icon :icon="['fas', 'eye']" v-if="!this.ifhideCallout" size="lg" @click="hideCallout" />
            </div>
            <div class="tool-bar2" :class="{ red: changeColor == 11 }" title="清除">
                <font-awesome-icon :icon="['fas', 'brush']" size="lg" @click="clearMeasure" />
            </div>
        </div>
        <div class="divSettingSwitch" v-if="isSwitchPanelShow">
            <el-switch style="margin: 5px" v-model="switchValue.scale" active-text="比例尺" inactive-text></el-switch>
            <el-switch style="margin: 5px" v-model="switchValue.zoom" active-text="缩放" inactive-text></el-switch>
            <el-switch style="margin: 5px" v-model="switchValue.disc" active-text="播放" inactive-text></el-switch>
            <el-switch style="margin: 5px" v-model="switchValue.markLabel" active-text="标注" inactive-text></el-switch>
            <el-switch style="margin: 5px" v-model="switchValue.AIAnalysis" active-text="AI分析" inactive-text></el-switch>
            <el-switch style="margin: 5px" v-model="switchValue.patientId" active-text="病理号" inactive-text></el-switch>
            <el-switch style="margin: 5px" v-model="switchValue.net" active-text="网格" inactive-text></el-switch>
            <el-switch style="margin: 5px" v-model="switchValue.isFlicker" active-text="闪烁" inactive-text />
            <el-switch style="margin: 5px" v-model="switchValue.groupMark" active-text="组标注" inactive-text></el-switch>
            <!--            <el-switch style="margin:5px"-->
            <!--                       v-model="switchValue.navigator"-->
            <!--                       active-text="导航"-->
            <!--                       inactive-text="">-->
            <!--            </el-switch>-->
        </div>
        <div class="openSeadragon">
            <open-seadragon :key="newTimer" v-if="openseadragonIsShow" v-show="ifOpenseadragon" ref="openseadragon"
                :dzi-url="dziUrl" :pixelsPerMeter="1992428.7706714484" @annotation-drawing-end="annotationDrawingEnd"
                @measure-annotation-drawing-end="measureAnnotationDrawingEnd"
                @mh-annotation-drawing-end="mhAnnotationDrawingEnd" @uploadAnnotation="uploadAnnotation"
                @jumpToNumber="jumpToNumber" :annotationsData="annotationsDataInit" :AiAnnotationsData="aiAnnotationsData"
                :MHAnnotationsData="mhAnnotationsData" :info="info" :bgColor="bgColor" :tiles="tiles" :type="sourceType"
                :imageInfo="imageInfo" style="width: 100vw; height: 100vh" @openseadragon-open="openseadragonOpen"
                @ai-annotation-drawing-end="aiAnnotationDrawingEnd" @view-zoom="viewZoom"
                @annotation-select="annotationSelect"></open-seadragon>
        </div>
        <div>
            <el-dialog title="诊断列表" :visible.sync="visibleDict.patienterList" @closed="DiagnosisListclosed" width="80%"
                v-dialogDrag>
                <DiagnosisList></DiagnosisList>
            </el-dialog>

            <el-dialog :visible.sync="visibleDict.annotationsWarn" width="20%" :show-close="false"
                :close-on-click-modal="false">
                <el-form ref="markRefForm" :model="mark" :rules="markRules">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="标注笔记:" style="margin-bottom: 10px">
                                <el-input type="textarea" :rows="3" v-model="mark.warning" size="mini"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="备注内容:">
                                <el-input type="textarea" :rows="1" v-model="mark.remark" size="mini"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row style="margin-top: 16px">
                        <el-col :span="12" style="text-align: center">
                            <el-form-item>
                                <el-button type="primary" @click="Submit" size="mini">确定</el-button>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" style="text-align: center">
                            <el-form-item>
                                <el-button @click="annotationsWarnCancel" size="mini">取消</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-dialog>
            <el-dialog title="快捷键说明" @closed="hotkeyclosed" :visible.sync="hotkey" width="50%">
                <HotKey></HotKey>
            </el-dialog>
            <div v-if="annDialogVisible" class="updateInfo">
                <el-form ref="markRefForm" :model="mark" :rules="markRules" style="padding: 3px">
                    <el-form-item prop="warning" class="formLableColor" label="标注笔记:">
                        <el-input type="textarea" :rows="2" v-model="mark.warning" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item prop="remark" class="formLableColor" label="备注内容:">
                        <el-input type="textarea" :rows="2" v-model="mark.remark" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item class="formLableColor" label="面积:">
                        <span>{{ updateAnnInfo.area }}μm²</span>
                    </el-form-item>
                    <el-form-item class="formLableColor" label="长:">
                        <span>{{ updateAnnInfo.width }}μm</span>
                    </el-form-item>
                    <el-form-item class="formLableColor" label="宽:">
                        <span>{{ updateAnnInfo.height }}μm</span>
                    </el-form-item>
                    <el-form-item class="formLableColor" label="标注人:">
                        <span>{{ updateAnnInfo.saveUserName }}</span>
                    </el-form-item>
                    <el-form-item class="formLableColor" label="时间:">
                        <span>{{ updateAnnInfo.createAt }}</span>
                    </el-form-item>
                </el-form>
                <div slot="footer" style="float: right" class="dialog-footer">
                    <el-button size="mini" @click="annDialogVisible = false">取 消</el-button>
                    <el-button type="primary" size="mini" @click="updateAnnSubmit(updateAnnInfo.annotationId)">确
                        定</el-button>
                </div>
            </div>
            <AIFloating ref="AIFloatingREF" v-if="drawer &&
                (specimenType === 1577 ||
                    specimenType === 1579 ||
                    this.specimenType === 1565 ||
                    this.specimenType === 1567)
                " @jumpTo="jumpTo" :AIdata="AIdata"></AIFloating>
            <AiTct ref="AiTct" v-if="drawer && specimenType === 1578" :tctPartOfGroup="tctPartOfGroup"
                @click-part-0f-group="clickPartOfGroup"></AiTct>
            <SliceInfo ref="SliceInfo" :SliceInfoData="SliceInfoData" :currentLevelLabel="currentLevelLabel"
                v-if="SliceInfoData != null && visibleDict.isShowSliceInfoStatus"></SliceInfo>
            <viewer-diagnostic-basis ref="viewerDiagnosticBasis" v-show="diagnosticBasisData.showStatus && pathologyId"
                @calcTotleScore="calcTotleScore" />
            <Analysis v-if="Ifanalysis"></Analysis>
            <!-- 评价列表 -->
            <el-dialog title="AI分析列表" @closed="AIEvaluationClose" :visible.sync="visibleDict.AIEvaluationDialogList"
                width="80%" center>
                <el-form label-width="70px">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="病理号">
                                <el-input v-model="EvaluationFormFilter.pathologyId" placeholder="请输入查询的病理号"
                                    class="input-form" size="mini"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="切片id">
                                <el-input v-model="EvaluationFormFilter.biopsyId" placeholder="请输入查询的切片id"
                                    class="input-form" size="mini"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="2" :offset="8">
                            <el-button size="mini" @click="search">
                                <font-awesome-icon :icon="['fas', 'search']"></font-awesome-icon>
                            </el-button>
                        </el-col>
                        <el-col :span="2">
                            <el-button @click="AIEvaluationDialogShow" size="mini">新增</el-button>
                        </el-col>
                    </el-row>
                </el-form>
                <base-table :data="AIEvaluationDialogListTableData" :header="AIEvaluationDialogListTableHeader"
                    :operation="operation" :pageInfo="pageInfo" :pageSizes="[5, 10, 15]"
                    @handleClick="exampleTableButtonClick" @pageJumpTo="exampleTablePageJumpTo"
                    @sizeChange="exampleTableSizeChange"></base-table>
            </el-dialog>
            <!-- 诊断实验结果统计 -->
            <!-- <el-dialog title="诊断实验结果统计" :visible.sync="experimentDialog" width="40%" center @close="closeExperimentDialog">
        <DiagnosisResultStatisticsComp :isAutoRefresh="false" ref="DiagnosisResultStatisticsComp">
        </DiagnosisResultStatisticsComp>
      </el-dialog> -->
            <!-- 评价详情 -->
            <el-dialog title="AI分析准确性评价" :visible.sync="visibleDict.AIEvaluationDialog" width="40%" center
                @close="closeAIDialog">
                <el-form label-width="100px">
                    <el-row>
                        <el-col :span="10" :offset="4">
                            <el-form-item label="病理号">
                                <el-input v-model="AIEvaluationForm.pathologyId" placeholder="请输入病理号" class="input-form"
                                    size="mini" disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="切片名称">
                                <el-input v-model="AIEvaluationForm.sliceName" placeholder="请输入切片名称" class="input-form"
                                    size="mini" disabled></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="4" class="height40">阴阳性:</el-col>
                        <el-col :span="10">
                            <el-form-item label="AI分析">
                                <el-input v-model="AIEvaluationForm.masculineAi" placeholder class="input-form" size="mini"
                                    disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="专家意见">
                                <el-select v-model="AIEvaluationForm.expertAdvice" placeholder="请选择专家意见" class="picker-form"
                                    size="mini">
                                    <el-option v-for="(data, index) in AIEvaluationFormList.yinyangOpinion" :key="index"
                                        :label="data.name" :value="data.name"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="4" class="height40">专家诊断:</el-col>
                        <el-col :span="20">
                            <el-row class="height40">
                                <el-col :span="4">
                                    <el-radio v-model="AIEvaluationForm.radio" label="低瘤">低瘤</el-radio>
                                </el-col>
                                <el-col :span="4">
                                    <el-radio v-model="AIEvaluationForm.radio" label="高瘤">高瘤</el-radio>
                                </el-col>
                                <el-col :span="4">
                                    <el-radio v-model="AIEvaluationForm.radio" label="腺癌">腺癌</el-radio>
                                </el-col>
                                <el-col :span="4">
                                    <el-radio v-model="AIEvaluationForm.radio" label="印戒">印戒</el-radio>
                                </el-col>
                                <el-col :span="4">
                                    <el-radio v-model="AIEvaluationForm.radio" label="诊断不明，提示准确">诊断不明，提示准确</el-radio>
                                </el-col>
                            </el-row>
                            <el-row class="height40">
                                <el-col :span="4">
                                    <el-radio v-model="AIEvaluationForm.radio" label="鳞癌">鳞癌</el-radio>
                                </el-col>
                                <el-col :span="4">
                                    <el-radio v-model="AIEvaluationForm.radio" label="淋巴瘤">淋巴瘤</el-radio>
                                </el-col>

                                <el-col :span="4">
                                    <el-radio v-model="AIEvaluationForm.radio" label="其他">其他</el-radio>
                                </el-col>
                                <el-col :span="8">
                                    <el-input v-model="AIEvaluationForm.other" placeholder class="input-form"
                                        size="mini"></el-input>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                    <el-row style="margin: 10px auto">
                        <el-col :span="24">备注（可记录错误的勾画圈号，如可疑1）:</el-col>
                        <el-col>
                            <el-input type="textarea" v-model="AIEvaluationForm.remark"></el-input>
                        </el-col>
                    </el-row>
                    <el-row style="text-align: center">
                        <el-button v-show="!!AIEvaluationForm.masculineAi" type="primary" @click="correctYinYang"
                            icon="el-icon-check">准确(阴阳性判断)</el-button>
                        <el-button v-show="!!AIEvaluationForm.masculineAi" type="danger" @click="errorYinYang"
                            icon="el-icon-close">错误(阴阳性判断)</el-button>
                    </el-row>
                    <el-row>
                        <el-col :span="4" class="height40">慢性炎症:</el-col>
                        <el-col :span="10">
                            <el-form-item label="AI分析">
                                <el-input v-model="AIEvaluationForm.chronicInflammationAi" placeholder class="input-form"
                                    size="mini" disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="专家意见">
                                <el-select v-model="AIEvaluationForm.chronicInflammationExpertAdvice" placeholder="请选择专家意见"
                                    class="picker-form" size="mini">
                                    <el-option v-for="(
                      data, index
                    ) in AIEvaluationFormList.expertAdviceList" :key="index" :label="data.name"
                                        :value="data.name"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="4" class="height40">肠化:</el-col>
                        <el-col :span="10">
                            <el-form-item label="AI分析">
                                <el-input v-model="AIEvaluationForm.imAi" placeholder class="input-form" size="mini"
                                    disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="专家意见">
                                <el-select v-model="AIEvaluationForm.imExpertAdvice" placeholder="请选择专家意见"
                                    class="picker-form" size="mini">
                                    <el-option v-for="(
                      data, index
                    ) in AIEvaluationFormList.expertAdviceList" :key="index" :label="data.name"
                                        :value="data.name"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="4" class="height40">萎缩:</el-col>
                        <el-col :span="10">
                            <el-form-item label="AI分析">
                                <el-input v-model="AIEvaluationForm.atrophyAi" placeholder class="input-form" size="mini"
                                    disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="专家意见">
                                <el-select v-model="AIEvaluationForm.atrophyExpertAdvice" placeholder="请选择专家意见"
                                    class="picker-form" size="mini">
                                    <el-option v-for="(
                      data, index
                    ) in AIEvaluationFormList.expertAdviceList" :key="index" :label="data.name"
                                        :value="data.name"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="4" class="height40">活动度:</el-col>
                        <el-col :span="10">
                            <el-form-item label="AI分析">
                                <el-input v-model="AIEvaluationForm.activityAi" placeholder class="input-form" size="mini"
                                    disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="专家意见">
                                <el-select v-model="AIEvaluationForm.activityExpertAdvice" placeholder="请选择专家意见"
                                    class="picker-form" size="mini">
                                    <el-option v-for="(
                      data, index
                    ) in AIEvaluationFormList.expertAdviceList" :key="index" :label="data.name"
                                        :value="data.name"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="4" class="height40">HP:</el-col>
                        <el-col :span="10">
                            <el-form-item label="AI分析">
                                <el-input v-model="AIEvaluationForm.hpai" placeholder class="input-form" size="mini"
                                    disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="专家意见">
                                <el-select v-model="AIEvaluationForm.hpexpertAdvice" placeholder="请选择专家意见"
                                    class="picker-form" size="mini">
                                    <el-option v-for="(
                      data, index
                    ) in AIEvaluationFormList.expertAdviceList" :key="index" :label="data.name"
                                        :value="data.name"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="4" class="height40">异性增生:</el-col>
                        <el-col :span="10">
                            <el-form-item label="AI分析">
                                <el-input v-model="AIEvaluationForm.alienGrowthAi" placeholder class="input-form"
                                    size="mini" disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="专家意见">
                                <el-select v-model="AIEvaluationForm.alienGrowthExpertAdvice" placeholder="请选择专家意见"
                                    class="picker-form" size="mini">
                                    <el-option v-for="(
                      data, index
                    ) in AIEvaluationFormList.expertAdviceList" :key="index" :label="data.name"
                                        :value="data.name"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="10" :offset="4">
                            <el-form-item label="评价专家">
                                <el-input v-model="AIEvaluationForm.evaluateExpert" placeholder class="input-form"
                                    size="mini" disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="评价日期">
                                <el-date-picker v-model="AIEvaluationForm.evaluateTime" type="datetime" size="mini"
                                    value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期"></el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="closeAIEvaluationDialog">取 消</el-button>
                    <el-button v-show="!!AIEvaluationForm.masculineAi" type="primary" @click="copyAiAnalysis"
                        icon="el-icon-check">全部准确</el-button>
                    <el-button type="primary" @click="putExpertOpinion" v-show="btnSureShow == true">提 交</el-button>
                </span>
            </el-dialog>

            <div class="dialog" v-if="annotationsData.length > 0 && switchValue.markLabel">
                <ul>
                    <template>
                        <li v-for="(data, index) in annotationsData" :key="index" @mouseover="selectStyle(data)"
                            @mouseout="outStyle(data)">
                            <div style="position: relative; height: 100px">
                                <img class="liImg" v-bind:src="data.imageUrl" @click="updateAnnotation(data)" />
                                <img src="/images/cancel.png" @click="deleteAnnotation(data.annotationId)" style="
                    position: absolute;
                    right: 10px;
                    width: 20px;
                    cursor: pointer;
                  " />
                                <span class="annPicUserName">{{ data.saveUserName }}</span>
                            </div>
                            <div :class="{ active1: data.active }" v-show="data.active">
                                <el-form style="padding: 3px">
                                    <el-form-item type="textarea" :rows="2" class="formLableColor" label="标注笔记:">
                                        <span>{{ data.remarkOne }}</span>
                                    </el-form-item>
                                    <el-form-item type="textarea" :rows="2" class="formLableColor" label="备注内容:">
                                        <span>{{ data.remarkTwo }}</span>
                                    </el-form-item>
                                    <el-form-item class="formLableColor" label="面积:">
                                        <span>{{ data.areaInfo.area }}μm²</span>
                                    </el-form-item>
                                    <el-form-item class="formLableColor" label="长:">
                                        <span>{{ data.areaInfo.width }}μm</span>
                                    </el-form-item>
                                    <el-form-item class="formLableColor" label="宽:">
                                        <span>{{ data.areaInfo.height }}μm</span>
                                    </el-form-item>
                                    <el-form-item class="formLableColor" label="标注人:">
                                        <span>{{ data.saveUserName }}</span>
                                    </el-form-item>
                                    <el-form-item class="formLableColor" label="时间:">
                                        <span>{{ data.createAt }}</span>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </li>
                    </template>
                </ul>
            </div>
            <div class="quality-evaluation" v-show="qualityEvaluationShow">
                <el-form label-width="75px">
                    <el-row>
                        <el-col :span="4">
                            <el-form-item label="切片质量:">
                                <el-select v-model="qualityEvaluationForm.biopsyQuality" class="picker-form" size="mini">
                                    <el-option v-for="t in biopsyQualityList" :key="t.id" :label="t.label"
                                        :value="t.label"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="清晰度:">
                                <el-select v-model="qualityEvaluationForm.scanDefinition" class="picker-form" size="mini">
                                    <el-option v-for="t in scanQualityList" :key="t.id" :label="t.label"
                                        :value="t.label"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="1" class="juzhong">
                            <el-button type="primary" size="mini" @click="submitEvaluate">提交</el-button>
                        </el-col>
                        <el-col :span="2" class="juzhong">
                            <el-input type="number" min="1" v-model="qualityEvaluationForm.serialNumber" placeholder="切片序号"
                                class="input-form" size="mini">
                                <el-button slot="append" icon="el-icon-search" size="mini"
                                    @click="findSliceByCurrentBiopsyCount"></el-button>
                            </el-input>
                        </el-col>
                        <el-col :span="1" class="juzhong" style="margin-left: 15px">
                            <el-button type="primary" size="mini" @click="scanerPrev">上一张</el-button>
                        </el-col>
                        <el-col :span="1" class="juzhong">
                            <el-button type="primary" size="mini" @click="scanerNext">下一张</el-button>
                        </el-col>
                        <el-col :span="2" class="juzhong">
                            <el-button type="primary" size="mini" @click="rescan">需重扫并进入下一张</el-button>
                        </el-col>

                        <el-col :span="1" class="juzhong">
                            <el-button type="primary" size="mini" @click="scanQualityPass">通过并进入下一张</el-button>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8" :offset="8">
                            <div class="juzhong">
                                当前第
                                <span class="red-color">
                                    {{ qualityEvaluationForm.currentSerialNumber.split("/")[0] }}
                                </span>
                                片/共
                                <span class="red-color">
                                    {{ qualityEvaluationForm.currentSerialNumber.split("/")[1] }}
                                </span>
                                片
                            </div>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div class="F3info" v-if="switchValue.markLabel">
                <span v-html="F3AnalysisInfo"></span>
            </div>

            <div class="leftPic" @mouseover="mouseover" @mouseout="mouseout" v-bind:style="styleObjectClass"
                v-if="showleftPic">
                <div :key="index" v-for="(data, index) in biopsyList" style="position: relative">
                    <img v-bind:src="ImageServiceURL + data.previewUrl"
                        :class="isActive == index ? 'yesActive' : 'noActive'" @click="
                            getAnnotations(
                                data.id,
                                data.newFilename,
                                data.originFilename,
                                data.labelUrl,
                                index
                            )
                            " />
                    <div :class="[
                        data.pred == '0'
                            ? 'greenStatus'
                            : data.pred == '1'
                                ? 'redStatus'
                                : 'greyStatus',
                    ]" class="colorStatus"></div>
                </div>
            </div>

            <div class="rightLable" v-show="this.switchValue.patientId" ref="IMAGE_SERVICE" @click="imagePinwheel($event)">
                <img style="height: 95px; width: 201px" v-bind:src="ImageServiceURL + reversedLabelUrl"
                    title="鼠标左键点击可顺时针旋转90度" />
            </div>
        </div>
        <!-- 教鞭 -->
        <canvas id="ruler-overlay" v-show="isAllowDrawLine"></canvas>
        <!-- 截图 -->
        <canvas id="drawRectCanvas"></canvas>
        <canvas id="shadeCanvas"></canvas>

        <div id="prescription" style="display: none; background: white; flex-wrap: wrap">
            <!--倍率框-->
            <div id="rate" style="text-align: left; width: 100%"></div>
            <!--时间框-->
            <div id="screenshotTime" style="text-align: left; width: 100%"></div>
            <!--可输入框-->
            <div id="SCinputBox" style="
          text-align: center;
          width: 100%;
          word-break: break-all;
          word-wrap: break-word;
          background: white;
          font-size: 18px;
        " contenteditable="true" placeholder="请输入描述内容"></div>
        </div>
        <div id="canvasToolbar">
            <div class="canvasButton" title="退出截图" id="cancel" @click="sCancel">
                <font-awesome-icon :icon="['fas', 'power-off']" size="lg" />
            </div>
            <div class="canvasButton" title="完成截图" id="success" @click="sSuccess">
                <font-awesome-icon :icon="['fas', 'check']" size="lg" />
            </div>
        </div>
        <!-- <el-dialog v-dialogDrag title="临床" :visible.sync="clinicalDialogVisible" width="75%">
      <DiagnosisDetailClinical :typeActiveTab="clinicalActiveTab"></DiagnosisDetailClinical>
    </el-dialog> -->
        <el-dialog v-dialogDrag title="MH" :visible.sync="mhDialogVisible" width="75%" @close="closeMHDialog">
            <el-table v-if="mhDialogVisible" :data="MHData" border :cell-style="{ 'text-align': 'center' }"
                :header-cell-style="{
                    'background-color': '#E6E9EF',
                    color: '#777C7C',
                    'font-weight': '400',
                    'font-size': '15px',
                    'border-right': '1px solid #ffffff',
                    'text-align': 'center',
                }" size="mini" style="width: 100%; margin-top: 20px; min-height: 750px">
                <el-table-column label="序号" prop="index" width="60" align="center">
                </el-table-column>
                <el-table-column label="缩略图">
                    <template slot-scope="scope">
                        <el-image style="width: 100px; height: 100px" :src="ImageServiceURL + scope.row.previewUrl"
                            :preview-src-list="[ImageServiceURL + scope.row.previewUrl]"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="热力图">
                    <template slot-scope="scope">
                        <el-image style="width: 100px; height: 100px" :src="ImageServiceURL + scope.row.url"
                            :preview-src-list="[ImageServiceURL + scope.row.url]"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="分数图">
                    <template slot-scope="scope">
                        <el-image style="width: 100px; height: 100px" :src="ImageServiceURL + scope.row.fractionUrl"
                            :preview-src-list="[ImageServiceURL + scope.row.fractionUrl]"></el-image>
                    </template>
                </el-table-column>

                <el-table-column prop="fraction" label="分数"> </el-table-column>
                <el-table-column prop="biopsyId" label="切片id"> </el-table-column>
                <el-table-column prop="createTime" label="创建时间"> </el-table-column>
                <el-table-column prop="biopsyName" label="切片名"> </el-table-column>
                <el-table-column prop="createUser" label="创建用户"> </el-table-column>
                <el-table-column label="分析状态"><template slot-scope="scope">{{
                    scope.row.status == 0
                    ? "待分析"
                    : scope.row.status == 1
                        ? "分析中"
                        : scope.row.status == 2
                            ? "分析完成"
                            : scope.row.status == 3
                                ? "分析失败"
                                : ""
                }}</template>
                </el-table-column>
                <el-table-column prop="reasonForFailure" label="失败原因">
                </el-table-column>
                <el-table-column label="操作" align="center" width="180">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" @click="resetOnePoint(scope.row)">回显</el-button>
                        <el-button size="mini" type="text" @click="deletePoint(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
import qs from "qs";
import _ from "lodash";
import $ from "jquery";
import jcanvasFactory from "./Viewer/jcanvas";
import html2canvas from "./Viewer/html2canvas";
import OpenSeadragon from "./components/OpenSeadragon/OpenSeadragon";
import DiagnosisList from "./Viewer/ViewerDiagnosisList";
import AIFloating from "./Viewer/AIFloating";
import AiTct from "./Viewer/AiTct.vue";
import SliceInfo from "./Viewer/SliceInfo";
import HotKey from "./Viewer/Hotkey";

//import DiagnosisDetailClinical from "./components/DiagnosisDetailClinical";
import Analysis from "./Viewer/Analysis";
import BaseTable from "@/templates/components/BaseTable";
//import Client from "../../server/client";

//import DiagnosisResultStatisticsComp from "@templates/components/diagnosisResultStatisticsComp.vue";
import ViewerDiagnosticBasis from "@/templates/Viewer/ViewerDiagnosticBasis";
import { vxRule } from "../libs/validator";
import VueDragResize from "vue-drag-resize";
export default {
    components: {
        OpenSeadragon,
        DiagnosisList,

        AIFloating,
        AiTct,
        SliceInfo,
        HotKey,
        Analysis,
        BaseTable,

        ViewerDiagnosticBasis,
        VueDragResize,
    },
    data() {
        return {
            //九宫格
            //   isShow: false,
            //   cellSize: 1,
            //   // 修改
            //   originCellCol: 1, // 记录放大之前的格式
            //   originCellRow: 1,
            //   imgZoomStatus: undefined,
            //   originCellKey: undefined, // 记录放大之前的图片key值
            //   showCols: 1,
            //   showRows: 1,
            //   currentPath: undefined,
            //   cellItemStyle: {
            //     width: "0px",
            //     height: "0px",
            //   },
            //   gridLayoutTool: [
            //     {
            //       icon: "iconfont icon-gridlayout",
            //       text: "布局",
            //       location: "first",
            //       func: "changeLayout",
            //     },
            //   ],

            clinicalDialogVisible: false,
            mhDialogVisible: false,
            MHData: [],
            isCollected: null,
            newTimer: "",
            openseadragonIsShow: false,
            tiles: [
                {
                    scaleFactors: [1, 4, 16],
                    width: 440,
                    height: 540,
                },
            ],
            sourceType:
                this.$route.query.fileName.indexOf("sdpc") >= 0 ? "IIIF" : "DZI",
            imageInfo: {
                width: 21120,
                height: 77760,
                maxLevel: 0,
                curScale: 0,
            },
            currentDeg: 0,
            userName: this.$store.state.user.name,
            currentSuspicious: {}, //当前可疑点
            switchValue: {
                scale: true,
                zoom: true,
                disc: true,
                markLabel: true,
                AIAnalysis: false,
                patientId: true,
                navigator: true,
                net: false,
                isFlicker: false, //控制标注闪烁
                groupMark: false, //成组标注开关
            },
            isFullScreen: true,
            isSlicePanelShow: false,
            isPencilPanelShow: false,
            isColorPanelShow: false,
            isSwitchPanelShow: false,
            coordinateColor: {
                red: 50,
                blue: 50,
                gama: 100,
                yellow: 50,
                contrast: 100,
                light: 50,
            },
            //传给组件diagnosisdetail组件的值，快捷键调出子组件对应的tab-item
            activeTabItem: "tabBase",
            clinicalActiveTab: "tabGastroscopeReport",
            // 左侧切片图片样式
            styleObject: {
                cursor: "pointer",
                position: "relative",
                isDisplay: "inline",
                width: "200px",
            },
            styleObjectClass: {
                left: "-100px",
            },
            yinYangIcons: [],
            biopsyList: [],

            biopsyId: this.$route.query.biopsyId,
            newBiopsyid: this.$route.query.biopsyId, //根据扫描员点击上一张下一张变的切片id
            biopsyOriginFilename: this.$route.query.originFilename,
            biopsyName: this.$route.query.fileName,
            labelUrl: "",
            annotationsDataInit: [],
            ifhideCallout: false,
            active: false,
            // 标注提示
            mark: {
                warning: "",
                remark: "",
            },
            markRules: {
                warning: [
                    vxRule(true, null, "blur", "请填写标注笔记"),
                    vxRule(
                        true,
                        "length",
                        "blur",
                        "标注笔记填写请不要超过255个字符",
                        null,
                        255
                    ),
                ],
                remark: [
                    vxRule(true, null, "blur", "请填写备注内容"),
                    vxRule(
                        true,
                        "length",
                        "blur",
                        "备注内容填写请不要超过255个字符",
                        null,
                        255
                    ),
                ],
            },
            newannotations: [],
            newPic: "",
            // 组件AI数据
            F3info: null,
            F3AnalysisInfo: "",
            AIdata: null,
            SliceInfoData: null,
            drawer: false,
            Ifanalysis: false,
            experimentDialog: false,

            AIEvaluationDialogListTableData: [],
            operation: [
                {
                    label: "查看详情",
                    color: "red",
                    functionKey: "watchDetail",
                },
            ],
            pageInfo: {
                page: 1,
                size: 15,
                total: 0,
            },
            AIEvaluationDialogListTableHeader: [
                {
                    label: "切片id",
                    prop: "biopsyId",
                    width: "180",
                },
                {
                    label: "切片名称",
                    prop: "sliceName",
                    width: "180",
                },
                {
                    label: "阴阳性（AI）",
                    prop: "masculineAi",
                    width: "180",
                },
                {
                    label: "阴阳性（专家）",
                    prop: "expertAdvice",
                    width: "180",
                },
                {
                    label: "创建医生",
                    prop: "createUser",
                    width: "180",
                },
                {
                    label: "创建时间",
                    prop: "createTime",
                    width: "180",
                },
                {
                    label: "更新医生",
                    prop: "updateUser",
                    width: "180",
                },
                {
                    label: "更新时间",
                    prop: "updateTime",
                    width: "180",
                },
                {
                    label: "慢性炎症（AI）",
                    prop: "chronicInflammationAi",
                    width: "180",
                },
                {
                    label: "慢性炎症（专家）",
                    prop: "chronicInflammationExpertAdvice",
                    width: "180",
                },
                {
                    label: "肠化（AI）",
                    prop: "imAi",
                    width: "180",
                },
                {
                    label: "肠化（专家）",
                    prop: "imExpertAdvice",
                    width: "180",
                },
                {
                    label: "萎缩（AI）",
                    prop: "atrophyAi",
                    width: "180",
                },
                {
                    label: "萎缩（专家）",
                    prop: "atrophyExpertAdvice",
                    width: "180",
                },
                {
                    label: "活动性（AI）",
                    prop: "activityAi",
                    width: "180",
                },
                {
                    label: "活动性（专家）",
                    prop: "activityExpertAdvice",
                    width: "180",
                },
                {
                    label: "HP（AI）",
                    prop: "hpai",
                    width: "180",
                },
                {
                    label: "HP（专家）",
                    prop: "hpexpertAdvice",
                    width: "180",
                },
                {
                    label: "异性增生（AI）",
                    prop: "alienGrowthAi",
                    width: "180",
                },
                {
                    label: "异性增生（专家）",
                    prop: "alienGrowthExpertAdvice",
                    width: "180",
                },
                {
                    label: "备注",
                    prop: "remark",
                    width: "180",
                },
            ],
            EvaluationFormFilter: {
                pathologyId: this.$route.query.pathologyId,
                biopsyId: this.$route.query.biopsyId,
            },
            AIEvaluationForm: {
                pathologyId: "",
                biopsyId: "",
                sliceName: "",
                masculineAi: "",
                expertAdvice: "",
                remark: "",
                chronicInflammationAi: "",
                chronicInflammationExpertAdvice: "",
                imAi: "",
                imExpertAdvice: "",
                atrophyAi: "",
                atrophyExpertAdvice: "",
                activityAi: "",
                activityExpertAdvice: "",
                hpai: "",
                hpexpertAdvice: "",
                alienGrowthAi: "",
                alienGrowthExpertAdvice: "",
                evaluateExpert: "",
                evaluateTime: "",
                radio: "",
                other: "",
            },
            freezeTypeList: [], //冰冻类型字典
            AIEvaluationFormList: {
                expertAdviceList: [],
                yinyangOpinion: [
                    {
                        name: "阴性",
                        id: 0,
                    },
                    {
                        name: "阳性",
                        id: 1,
                    },
                ],
            },

            qualityEvaluationForm: {
                biopsyQuality: "",
                scanDefinition: "",
                scanNumber: "", //切片号
                serialNumber: "", //切片序号
                currentSerialNumber: "", //当前第几张/共多少张
                biopsyId: this.$route.query.biopsyId,
            },
            qualityEvaluationShow: false,
            dictionaryMap: [
                {
                    code: "sliceQuality",
                    array: "biopsyQualityList",
                },
                {
                    code: "scanningQuality",
                    array: "scanQualityList",
                },
                {
                    code: "countOfTransferPostiveToNegative",
                    array: "countOfTransferPostiveToNegativeList",
                },
            ],
            biopsyQualityList: [],
            scanQualityList: [],
            countOfTransferPostiveToNegativeList: [],

            isAllowDrawLine: false,
            btnSureShow: true,
            changeColor: -1,
            hotkey: false,
            visibleDict: {
                patienterList: false, //诊断列表
                patienterDetail: false, // 诊断详情
                AIEvaluationDialogList: false, //AI分析列表
                isShowSliceInfoStatus: false, // 切片信息
                AIEvaluationDialog: false, //AI分析准确性评价
                annotationsWarn: false, //画笔标注
            },
            pathologyServiceURL: process.env.VUE_APP_AnnotationsServiceURL,
            AnnotationsServiceURL: process.env.VUE_APP_AnnotationsServiceURL,
            ImageServiceURL: process.env.VUE_APP_ImageServiceURL,
            info: "", //病人信息
            bgColor: "", //综合分析红点绿点
            aiAnnotationsData: [], //胃镜aipoints
            tctPartOfGroup: {
                arrayASCUS: [], //tct ASCUS aipoints
                arrayASCH: [], //tct ASCH aipoints
                arrayLSIL: [], //tct LSIL  aipoints
                arrayHSIL: [], //tct HSIL aipoints
            },

            annotationsData: [],
            pencilActive: false,
            polygonActive: false,
            rectangleActive: false,
            measureDistanceActive: false,
            measureAreaActive: false,
            flag: true,
            timer: null,
            timerOne: null,
            viewerAngle: 0,
            viewerAngleCopy: 90,
            viewZoomNumber: 1,
            annDialogVisible: false,

            diagnosisIdMock: 0,
            updateAnnInfo: {
                annotationId: "",
                width: "",
                height: "",
                saveUserName: "",
                createAt: "",
                area: "",
            },
            showleftPic: true,
            diagnosisId: null,
            currentLevelLabel: null,
            loading: false,
            prevPathologyId: null,
            nextPathologyId: null,
            ifOpenseadragon: true,
            pathologyId: this.$route.query.pathologyId,
            collectionAnnotationImages: null,
            annotationImages: [],
            initWidth: 0,
            initHeight: 0,
            initX: 0,
            initY: 0,
            isActive: 0,
            specimenType: null,
            diagnosticBasisData: {
                showStatus: false,
            },
            dziUrl: this.pathologyServiceURL + this.$route.query.dzi,
            groupMark: { note: null, remark: null }, //成组标注存放的标注笔记与标注内容
            w: document.documentElement.clientWidth,
            h: document.documentElement.clientHeight - 50,

            mhAnnotationsData: [],
            mhAnnotationsDataDrawEnd: [],
            urlHaspDiagnosisType: this.$route.query.pDiagnosisType,
        };
    },

    methods: {
        getBioList() {
            let res = [];
            if (this.cellSize <= 1) {
                // res.push(this.currentPath);
                res.push({ newFilename: this.$route.query.fileName });
            } else {
                res = this.biopsyList.slice(0, this.cellSize);
            }
            console.log(res, this.biopsyList);
            return res;
        },
        jumpToCell(val) {
            this.currentPath = val;
            this.selectedGrid({
                col: 1,
                row: 1,
            });
            this.$refs.openseadragon[0].open(this.getPath(val.newFilename));
        },
        getPath(fileName) {
            if (fileName.indexOf("sdpc") >= 0) {
                return `${this.pathologyServiceURL}/images/${fileName}`;
            }
            return `${this.pathologyServiceURL}/images/${fileName}.dzi`;
        },
        getId(val) {
            return `open-sea-dragon${val}`;
        },
        // 九宫格
        selectedGrid(params) {
            console.log(params);
            this.originCellCol = this.showCols = params.col;
            this.originCellRow = this.showRows = params.row;
            this.cellSize = params.col * params.row;

            this.generateGrid(this.showRows, this.showCols);
        },
        generateGrid(rows, cols) {
            console.log(rows, cols);
            // 只要布局状态发生改变，所有的工具都恢复默认
            this.changeColor = -1;
            // 生成选择布局
            // 三个格子在一行，有3 * 2条border， 每条border宽1px, 所以总宽减去所有border的size，剩下位置三等分，就是每个item的宽了
            // 由于是矩形，高度也类似
            const freeBorderSize = cols * 2;
            this.cellItemStyle.width = `calc(${100 / cols}% - ${freeBorderSize / cols
                }px)`;
            this.cellItemStyle.height = `calc(${100 / rows}% - ${(freeBorderSize + 50) / rows
                }px)`;

            // 重制dicom viewer
            this.$nextTick(() => {
                if (this.$refs.openseadragon) {
                    // 格子布局渲染后顺序执行，防止找不到对应的ref
                    const refLength = this.$refs.openseadragon.length;
                    for (let i = 0; i < refLength; i++) {
                        if (this.cellSize > 1) {
                            this.$refs.openseadragon[i].normalToolSwitch(
                                "rulerOrScale",
                                false
                            );
                            this.$refs.openseadragon[i].open(
                                this.getPath(this.biopsyList[i].newFilename)
                            );
                        }
                        console.log(this.$refs.openseadragon[i], "ceshi+" + i);
                        this.$refs.openseadragon[i].measuring.reDraw(1);
                    }
                }
            });
        },
        addMouseWheelListener(element, callback) {
            // 接收字符串，DOM对象，JQuery对象等多种格式
            element = TypeModule.toHtmlElement(element);
            ["mousewheel", "DOMMouseScroll"].forEach((eventType) => {
                element.addEventListener(eventType, (event) => {
                    event = event || window.event;
                    const dy = event.wheelDelta || event.detail * -40;
                    callback(dy);
                });
            }, true);
        },

        // 修改布局
        gridLayout() {
            if (this.changeColor === 26) {
                this.changeColor = -1;
            } else {
                this.changeColor = 26;

                const { state } = this.$store;
                const { href } = this.$router.resolve({
                    name: 'ViewerCompare',
                    path: '/Viewer-compare',
                    query: {
                        fileName: this.$route.query.fileName,
                        originFilename: this.$route.query.originFilename,
                        pathologyId: this.$route.query.pathologyId,
                        biopsyId: this.$route.query.biopsyId,
                        authorization: state.authorization,
                        userId: state.user.id,
                        pDiagnosisType: sessionStorage.getItem('pDiagnosisType'),
                    },
                });
                const width = window.screen.availWidth + 10;
                const height = window.screen.availHeight + 10;
                window.open(
                    href,
                    'viewerCompare',
                    `location=no,width=${width},height=${height}`
                );
                console.log('1111-----');

            }
        },
        resize(newRect) {
            this.width = newRect.width;
            this.height = newRect.height;
            this.top = newRect.top;
            this.left = newRect.left;
        },
        //获取强生图片宽高
        getImageInfo(filename) {
            this.$axios({
                method: "GET",
                url: `${this.AnnotationsServiceURL}/images/info/${filename}`,
            }).then((res) => {
                if (res && res.data.code === 200) {
                    const result = res.data.data;
                    this.imageInfo.height = result.imageHeight;
                    this.imageInfo.width = result.imageWidth;
                    this.imageInfo.maxLevel = result.maxLevel;
                    this.imageInfo.curScale = result.curScale;
                    this.tiles[0].height = result.tileHeight;
                    this.tiles[0].width = result.tileWidth;
                    this.newTimer = new Date().getTime();
                    this.openseadragonIsShow = true;
                }
            });
        },
        // 图片旋转
        imagePinwheel(e) {
            console.log(this.$refs);
            this.currentDeg += 90;
            this.$refs.IMAGE_SERVICE.style.transform = `rotate(${this.currentDeg}deg)`;
        },
        calcTotleScore(data, isShowViewerDiagnosticBasis) {
            this.bgColor = data;
            // this.diagnosticBasisData.showStatus = isShowViewerDiagnosticBasis;
        },
        //切片重扫      请求后此切片会从服务器文件夹里删除，但是记录仍在
        sliceRescan() {
            this.$confirm(
                "如果重扫切片，此切片将删除，此条诊断记录不会出现在任务列表内，等扫描员将此切片补扫成功后，此条诊断记录会自动出现在任务列表。需要通知扫描员重新扫描此切片吗？",
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }
            )
                .then(() => {
                    let mData = {
                        biopsyId: this.newBiopsyid,
                        sliceQualityStatus: 2,
                        scanDefinition: "需重扫",
                    };
                    this.$axios({
                        method: "POST",
                        url: `/biopsy/slice/qualityEvaluate`,
                        data: mData,
                    }).then((res) => {
                        if (res && res.data.code === 200) {
                            this.$message.success("已通知扫描员重扫此切片");
                        } else {
                            this.$message.warning(res.data.message);
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消重扫",
                    });
                });
        },
        //根据切片id拿到切片信息
        getSliceInfoInfo(biopsyId) {
            this.$axios({
                method: "GET",
                url: `/biopsy/sliceQualityEvaluateSingleBiopsyInformation/${biopsyId}`,
            }).then((res) => {
                if (res && res.data.code === 200) {
                    this.SliceInfoData = res.data.data[0];
                    this.qualityEvaluationForm.serialNumber = "";
                } else {
                    this.$message.info(res.data.message);
                }
            });
        },
        //准确阴阳性判断
        correctYinYang() {
            this.AIEvaluationForm.expertAdvice = this.AIEvaluationForm.masculineAi;
            this.putExpertOpinion();
        },
        //错误阴阳性判断
        errorYinYang() {
            if (this.AIEvaluationForm.masculineAi == "阳性") {
                this.AIEvaluationForm.expertAdvice = "阴性";
            } else if (this.AIEvaluationForm.masculineAi == "阴性") {
                this.AIEvaluationForm.expertAdvice = "阳性";
            } else {
                this.AIEvaluationForm.expertAdvice = "";
            }
            this.putExpertOpinion();
        },
        //医生第一次打开病人切片浏览器的时间
        doctorOpenViewerTime(pBiopsyid) {
            this.$axios({
                methods: "GET",
                url: `/biopsy/recordStartDiagnosisTime/${pBiopsyid}/${this.$route.query.userId}`,
            }).then((res) => {
                console.log("打开切片浏览器", res);
            });
        },
        //医生最后提交评价的时间
        doctorSubmitEvaluationTime(pBiopsyid) {
            this.$axios({
                methods: "GET",
                url: `/biopsy/recordEndDiagnosisTime/${pBiopsyid}/${this.$route.query.userId}`,
            }).then((res) => {
                console.log("提交评价", res);
            });
        },
        //当前第几张/共多少张
        sliceQualityEvaluateRank() {
            let mData = {
                keyWord: this.$route.query.searchPathologyId,
                pid: this.newBiopsyid,
                //pupAndDown: '',
                slicePurpose: this.$route.query.slicePurpose,
                sliceQualityStatus: this.$route.query.sliceQualityStatus,
            };
            this.$axios({
                method: "POST",
                url: `/biopsy/sliceQualityEvaluateRank`,
                data: mData,
            }).then((res) => {
                if (res && res.data.code === 200) {
                    this.qualityEvaluationForm.currentSerialNumber = res.data.data;
                } else {
                    this.$message.info(res.data.message);
                }
            });
        },
        //通过切片序号找切片
        findSliceByCurrentBiopsyCount() {
            if (this.qualityEvaluationForm.serialNumber == "") {
                this.$message.info("请输入切片序号");
            } else {
                let mData = {
                    keyWord: this.$route.query.searchPathologyId,
                    pid: this.newBiopsyid,
                    pcurrentBiopsyCount: Number(this.qualityEvaluationForm.serialNumber),
                    slicePurpose: this.$route.query.slicePurpose,
                    sliceQualityStatus: this.$route.query.sliceQualityStatus,
                };
                this.$axios({
                    method: "POST",
                    url: `/biopsy/findSliceByCurrentBiopsyCount`,
                    data: mData,
                }).then((res) => {
                    if (res && res.data.code === 200) {
                        this.newBiopsyid = res.data.data.id;
                        this.$refs.openseadragon.open(
                            `${this.pathologyServiceURL}/images/${res.data.data.newFilename}.dzi`
                        );
                        this.getBiopsyAssess(this.newBiopsyid);
                        this.sliceQualityEvaluateRank();
                        this.getSliceInfoInfo(this.newBiopsyid);
                        this.$message.success("成功找到此切片");
                    } else {
                        this.$message.info(res.data.message);
                    }
                });
            }
        },

        //上一张
        scanerPrev() {
            let mData = {
                keyWord: this.$route.query.searchPathologyId,
                pid: this.newBiopsyid,
                pupAndDown: "up",
                slicePurpose: this.$route.query.slicePurpose,
                sliceQualityStatus: this.$route.query.sliceQualityStatus,
            };
            this.$axios({
                method: "POST",
                url: `/biopsy/findNextAndPreviousBiopsy`,
                data: mData,
            }).then(async (res) => {
                if (res && res.data.code === 200) {
                    this.newBiopsyid = res.data.data.id;
                    const filename = res.data.data.newFilename;
                    this.getBiopsyAssess(this.newBiopsyid);
                    this.sliceQualityEvaluateRank();
                    this.getSliceInfoInfo(this.newBiopsyid);
                    const isSdpc = filename.endsWith("sdpc");
                    this.sourceType = isSdpc ? "IIIF" : "DZI";
                    this.dziUrl = `${this.pathologyServiceURL}/images/${filename}.dzi`;
                    if (isSdpc) {
                        await this.getImageInfo(filename);
                    } else {
                        this.openseadragonIsShow = false;
                        this.newTimer = new Date().getTime();
                        this.openseadragonIsShow = true;
                        // this.$refs.openseadragon.open(
                        //     `${this.pathologyServiceURL}/images/${filename}.dzi`
                        // );
                    }
                    this.$message.success("上一张切换成功");
                } else if (res.data.code === 404) {
                    this.$message.info(res.data.message);
                }
            });
        },
        //下一张
        scanerNext() {
            let mData = {
                keyWord: this.$route.query.searchPathologyId,
                pid: this.newBiopsyid,
                pupAndDown: "down",
                slicePurpose: this.$route.query.slicePurpose,
                sliceQualityStatus: this.$route.query.sliceQualityStatus,
            };
            this.$axios({
                method: "POST",
                url: `/biopsy/findNextAndPreviousBiopsy`,
                data: mData,
            }).then(async (res) => {
                if (res && res.data.code === 200) {
                    this.newBiopsyid = res.data.data.id;
                    const filename = res.data.data.newFilename;
                    this.getBiopsyAssess(this.newBiopsyid);
                    this.sliceQualityEvaluateRank();
                    this.getSliceInfoInfo(this.newBiopsyid);
                    const isSdpc = filename.endsWith("sdpc");
                    this.sourceType = isSdpc ? "IIIF" : "DZI";
                    this.dziUrl = `${this.pathologyServiceURL}/images/${filename}.dzi`;

                    if (isSdpc) {
                        await this.getImageInfo(filename);
                    } else {
                        this.openseadragonIsShow = false;
                        this.newTimer = new Date().getTime();
                        this.openseadragonIsShow = true;
                        // this.$refs.openseadragon.open(
                        //     `${this.pathologyServiceURL}/images/${filename}.dzi`
                        // );
                    }
                    this.$message.success("下一张切换成功");
                } else if (res.data.code === 404) {
                    this.$message.info(res.data.message);
                }
            });
        },

        //扫描员此切片需要重扫
        rescan() {
            let mData = {
                biopsyId: this.newBiopsyid,
                sliceQualityStatus: 2,
                scanDefinition: "需重扫",
            };
            this.$axios({
                method: "POST",
                url: `/biopsy/slice/qualityEvaluate`,
                data: mData,
            }).then((res) => {
                if (res && res.data.code === 200) {
                    this.$message.success("提交重新扫描成功");
                    this.scanerNext();
                }
            });
        },
        getBiopsyAssess(biopsyId) {
            this.$axios({
                method: "get",
                url: `/biopsy/findByIdOfSliceQualityEvaluate/${biopsyId}`,
            }).then((res) => {
                if (res && res.data.code === 200) {
                    this.qualityEvaluationForm.biopsyQuality =
                        res.data.data.biopsyQuality || "";
                    this.qualityEvaluationForm.scanDefinition =
                        res.data.data.scanDefinition || "";
                    this.labelUrl = res.data.data.labelUrl || "";
                }
            });
        },
        //切片质量可以 直接通过提交并跳到下一张
        scanQualityPass() {
            let mData = {
                biopsyId: this.newBiopsyid,
                biopsyQuality: "甲",
                scanDefinition: "甲",
            };
            this.$axios({
                method: "POST",
                url: `/biopsy/slice/qualityEvaluate`,
                data: mData,
            }).then((res) => {
                if (res && res.data.code === 200) {
                    this.$message.success("提交成功");
                    this.scanerNext();
                }
            });
        },
        //扫描员提交切片质量
        submitEvaluate() {
            let mData = {
                biopsyId: this.newBiopsyid,
                biopsyQuality: this.qualityEvaluationForm.biopsyQuality,
                scanDefinition: this.qualityEvaluationForm.scanDefinition,
            };
            if (mData.scanDefinition === "需重扫") {
                mData.sliceQualityStatus = 2;
            }
            this.$axios({
                method: "POST",
                url: `/biopsy/slice/qualityEvaluate`,
                data: mData,
            }).then((res) => {
                if (res && res.data.code === 200) {
                    this.$message.success("提交成功");
                    this.getSliceInfoInfo(this.newBiopsyid);
                }
            });
        },
        search() {
            this.getAIEvaluationList();
        },
        watchDetail(row) {
            this.btnSureShow = false;
            this.$axios({
                method: "get",
                url: `/evaluate/get/${row.id}`,
            }).then((res) => {
                if (res && res.data.code === 200) {
                    this.AIEvaluationForm = res.data.data;
                    this.visibleDict.AIEvaluationDialog = true;
                }
            });
        },
        exampleTableButtonClick(functionKey, row) {
            this[functionKey](row);
        },
        exampleTablePageJumpTo(val) {
            this.pageInfo.page = val;
            // 为 exampleTable.data 赋值相应页上新数据
            this.getAIEvaluationList();
        },
        exampleTableSizeChange(val) {
            this.pageInfo.size = val;
            // 为 exampleTable.data 赋值相应数据量新数据
            this.getAIEvaluationList();
        },
        getAIEvaluationList() {
            this.$axios({
                method: "post",
                url: "/evaluate/findAll",
                data: {
                    page: this.pageInfo.page - 1,
                    size: this.pageInfo.size,
                    biopsyId: this.EvaluationFormFilter.biopsyId,
                    pathologyId: this.EvaluationFormFilter.pathologyId,
                },
            }).then((res) => {
                if (res && res.data.code === 200) {
                    this.AIEvaluationDialogListTableData = res.data.data;
                    this.pageInfo.page = res.data.pageInfo.page + 1;
                    this.pageInfo.size = res.data.pageInfo.size;
                    this.pageInfo.total = res.data.pageInfo.total;
                }
            });
        },
        copyAiAnalysis() {
            this.AIEvaluationForm.expertAdvice = this.AIEvaluationForm.masculineAi;
            this.AIEvaluationForm.chronicInflammationExpertAdvice =
                this.AIEvaluationForm.chronicInflammationAi;
            this.AIEvaluationForm.imExpertAdvice = this.AIEvaluationForm.imAi;
            this.AIEvaluationForm.atrophyExpertAdvice =
                this.AIEvaluationForm.atrophyAi;
            this.AIEvaluationForm.activityExpertAdvice =
                this.AIEvaluationForm.activityAi;
            this.AIEvaluationForm.hpexpertAdvice = this.AIEvaluationForm.hpai;
            this.AIEvaluationForm.alienGrowthExpertAdvice =
                this.AIEvaluationForm.alienGrowthAi;
            this.putExpertOpinion();
        },
        dictionariesRequest(dictMap) {
            // 字典数据请求
            dictMap.forEach(async (map) => {
                const res = await this.$axios({
                    method: "GET",
                    url: "/dicts/list",
                    params: {
                        code: map.code,
                        page: 0,
                        size: 99,
                    },
                });

                if (res && res.data.code === 200) {
                    const result = res.data;
                    result.data.forEach((t) => {
                        this[map.array].push({
                            id: t.id,
                            label: t.name,
                        });
                    });
                }
            });
        },
        putExpertOpinion() {
            let _this = this;
            if (
                this.AIEvaluationForm.expertAdvice == "阳性" &&
                this.AIEvaluationForm.radio == ""
            ) {
                this.$message.info("请选择专家诊断");
                return;
            }
            this.AIEvaluationForm.biopsyId = this.biopsyId;
            this.$axios({
                method: "put",
                url: "/evaluate/save",
                data: this.AIEvaluationForm,
            }).then(
                (res) => {
                    if (res && res.data.code === 200) {
                        this.visibleDict.AIEvaluationDialog = false;
                        this.$message.info("提交成功");
                        this.getAIEvaluationList();
                        this.doctorSubmitEvaluationTime(_this.biopsyId);
                    } else {
                        this.$message.info(res.data.message);
                    }
                },
                (err) => {
                    this.$message.info(`提交失败  ${err.response.data.message}`);
                }
            );
        },

        expertOpinion() {
            this.$axios({
                method: "GET",
                url: "/dicts/list",
                params: {
                    code: "expertAdvice",
                    page: 0,
                    size: 99,
                },
            }).then((res) => {
                if (res && res.data.code === 200) {
                    this.AIEvaluationFormList.expertAdviceList = res.data.data;
                }
            });
        },
        closeAIDialog() {
            this.visibleDict.AIEvaluationDialog = false;
            this.changeColor = -1;
            const _this = this;
            document.addEventListener("keydown", _this.watchEnter);
        },
        closeExperimentDialog() { },
        closeAIEvaluationDialog() {
            this.visibleDict.AIEvaluationDialog = false;
            this.changeColor = -1;
        },
        annotationSelect(item) {
            let _this = this;
            _this.$refs.AIFloatingREF.locatedToParticularIndex(item);
        },
        becomeFullScreen() {
            if (this.isFullScreen) {
                this.isFullScreen = false;
            } else {
                this.isFullScreen = true;
            }
        },
        pictureToolPanelShow(type) {
            if (type == 1) {
                this.isSlicePanelShow = !this.isSlicePanelShow;
                this.isColorPanelShow = false;
                this.isPencilPanelShow = false;
                this.isSwitchPanelShow = false;
                if (this.isSlicePanelShow) {
                    this.changeColor = 30;
                } else {
                    this.changeColor = -1;
                }
            }
            if (type == 2) {
                this.isSlicePanelShow = false;
                this.isColorPanelShow = false;
                this.isSwitchPanelShow = false;
                this.isPencilPanelShow = !this.isPencilPanelShow;
                if (this.isPencilPanelShow) {
                    this.changeColor = 29;
                } else {
                    this.changeColor = -1;
                }
            }
            if (type == 3) {
                this.isSlicePanelShow = false;
                this.isColorPanelShow = !this.isColorPanelShow;
                this.isPencilPanelShow = false;
                this.isSwitchPanelShow = false;
                if (this.isColorPanelShow) {
                    this.changeColor = 31;
                } else {
                    this.changeColor = -1;
                }
            }

            if (type == 4) {
                this.isSlicePanelShow = false;
                this.isColorPanelShow = false;
                this.isPencilPanelShow = false;
                this.isSwitchPanelShow = !this.isSwitchPanelShow;
                if (this.isSwitchPanelShow) {
                    this.changeColor = 32;
                } else {
                    this.changeColor = -1;
                }
            }
        },
        //对比度调节事件
        onContrastSlideChange(e) {
            this.coordinateColor.gama = 100;
            this.coordinateColor.light = 50;
            this.$refs.openseadragon.onContrastSlideChange(e);
        },
        //亮度调节事件
        onLightSlideInput(e) {
            this.coordinateColor.contrast = 100;
            this.coordinateColor.gama = 100;
            this.$refs.openseadragon.onLightSlideInput(e);
        },
        //gama调节事件
        onGamaSlideInput(e) {
            this.coordinateColor.contrast = 100;
            this.coordinateColor.light = 50;
            this.$refs.openseadragon.onGamaSlideInput(e);
        },
        //red调节事件
        onRedSlideInput(e) { },
        //yellow调节事件
        onYellowSlideInput(e) { },
        //blue调节事件
        onBlueSlideInput(e) { },
        //查询每个切片的阴性和阳性，AI智能预测的可疑点
        yinYangStatus() {
            let _this = this;
            this.biopsyList.forEach((item) => {
                // const c = item.originFilename.indexOf('.');
                // const name = item.originFilename.substring(0, c);
                const biopsyId = item.id;
                this.$axios({
                    method: "GET",
                    url: `${this.AnnotationsServiceURL}/annotations/results/aiprediction/${biopsyId}`,
                }).then((res) => {
                    if (res.data.code === 200) {
                        // 数据处理
                        let predTxt = res.data.data.info.pred;
                        if (_this.transferPositiveToNegative(res.data.data)) {
                            predTxt = 0;
                        }
                        this.yinYangIcons.push({
                            id: biopsyId,
                            pred: predTxt,
                        });
                    }
                    this.yinYangMatch();
                });
            });
        },
        //阴阳性匹配
        yinYangMatch() {
            this.biopsyList.forEach((item) => {
                this.yinYangIcons.forEach((icon) => {
                    if (item.id == icon.id) {
                        item.pred = icon.pred;
                    }
                });
            });
            // this.drawerAi()
        },
        __clearAllDrawingTools() {
            if (this.pencilActive) {
                this.pencilActive = false;
                this.$refs.openseadragon.beginPencilDrawing(this.pencilActive);
            }
            if (this.polygonActive) {
                this.polygonActive = false;
                this.$refs.openseadragon.beginPolygonDrawing(this.pencilActive);
            }
            if (this.rectangleActive) {
                this.rectangleActive = false;
                this.$refs.openseadragon.beginRectangleDrawing(this.rectangleActive);
            }
            if (this.measureDistanceActive) {
                this.measureDistanceActive = false;
                this.$refs.openseadragon.beginMeasuringDistance(
                    this.measureDistanceActive
                );
            }
            if (this.measureAreaActive) {
                this.measureAreaActive = false;
                this.$refs.openseadragon.beginMeasuringArea(this.measureAreaActive);
            }
        },
        togglePencilLine() {
            if (this.changeColor === 22) {
                this.changeColor = -1;
                this.cancelAnn();
            } else {
                this.changeColor = 22;
                this.__clearAllDrawingTools();
                this.pencilActive = !this.pencilActive;
                if (this.pencilActive) {
                    this.$refs.openseadragon.changeDrawClass({
                        color: "#b31a1a",
                        name: "涂抹",
                    });
                }
                this.$refs.openseadragon.beginPencilLineDrawing(this.pencilActive);
            }
        },
        toggleArrow() {
            if (this.changeColor === 23) {
                this.changeColor = -1;
                this.cancelAnn();
            } else {
                this.changeColor = 23;
                this.__clearAllDrawingTools();
                this.pencilActive = !this.pencilActive;
                if (this.pencilActive) {
                    this.$refs.openseadragon.changeDrawClass({
                        color: "#b31a1a",
                        name: "箭头",
                    });
                }
                this.$refs.openseadragon.beginArrowDrawing(this.pencilActive);
            }
        },
        togglePencil() {
            if (this.changeColor === 5) {
                this.changeColor = -1;
                this.cancelAnn();
            } else {
                this.changeColor = 5;
                this.__clearAllDrawingTools();
                this.pencilActive = !this.pencilActive;
                if (this.pencilActive) {
                    this.$refs.openseadragon.changeDrawClass({
                        color: "#b31a1a",
                        name: "铅笔",
                    });
                }
                this.$refs.openseadragon.beginPencilDrawing(this.pencilActive);
            }
        },
        MHtogglePencil() {
            if (this.changeColor === 37) {
                this.changeColor = -1;
                this.cancelAnn();
            } else {
                this.changeColor = 37;
                this.__clearAllDrawingTools();
                this.pencilActive = !this.pencilActive;
                if (this.pencilActive) {
                    this.$refs.openseadragon.changeDrawClass({
                        color: "#b31a1a",
                        name: "铅笔",
                    });
                }
                this.$refs.openseadragon.mhBeginPencilDrawing(this.pencilActive);
            }
        },
        toggleCircle() {
            if (this.changeColor === 21) {
                this.changeColor = -1;
                this.cancelAnn();
            } else {
                this.changeColor = 21;
                this.__clearAllDrawingTools();
                this.pencilActive = !this.pencilActive;
                if (this.pencilActive) {
                    this.$refs.openseadragon.changeDrawClass({
                        color: "#b31a1a",
                        name: "圆形",
                    });
                }
                this.$refs.openseadragon.beginCircleDrawing(this.pencilActive);
            }
        },
        togglePolygon() {
            if (this.changeColor === 7) {
                this.changeColor = -1;
                this.cancelAnn();
            } else {
                this.changeColor = 7;
                this.__clearAllDrawingTools();
                this.polygonActive = !this.polygonActive;
                if (this.polygonActive) {
                    this.$refs.openseadragon.changeDrawClass({
                        color: "#b31a1a",
                        name: "铅笔",
                    });
                }
                this.$refs.openseadragon.beginPolygonDrawing(this.polygonActive);
            }
        },
        toggleRectangle() {
            if (this.changeColor === 6) {
                this.changeColor = -1;
                this.cancelAnn();
            } else {
                this.changeColor = 6;
                this.__clearAllDrawingTools();
                this.rectangleActive = !this.rectangleActive;
                if (this.rectangleActive) {
                    this.$refs.openseadragon.changeDrawClass({
                        color: "#b31a1a",
                        name: "矩形",
                    });
                }

                this.$refs.openseadragon.beginRectangleDrawing(this.rectangleActive);
            }
        },
        toggleMeasureDistanceOnly() {
            if (this.changeColor === 40) {
                this.changeColor = -1;
                this.__clearAllDrawingTools();
            } else {
                this.changeColor = 40;
                this.__clearAllDrawingTools();
                this.measureDistanceActive = !this.measureDistanceActive;
                this.$refs.openseadragon.beginMeasuringDistance(
                    this.measureDistanceActive, this.changeColor
                );
            }
        },
        toggleMeasureDistance() {
            if (this.changeColor === 9) {
                this.changeColor = -1;
                this.__clearAllDrawingTools();
            } else {
                this.changeColor = 9;
                this.__clearAllDrawingTools();
                this.measureDistanceActive = !this.measureDistanceActive;
                this.$refs.openseadragon.beginMeasuringDistance(
                    this.measureDistanceActive, this.changeColor
                );
            }
        },
        openseadragonOpen() {
            let _this = this;
            // setTimeout(function () {
            //   if (this.drawer) {
            //     _this.$refs.AIFloatingREF.locatedToFirstAnno();
            //   }
            // }, 2000);
        },
        toggleMeasureArea() {
            if (this.changeColor === 10) {
                this.changeColor = -1;
                this.__clearAllDrawingTools();
            } else {
                this.changeColor = 10;
                this.__clearAllDrawingTools();
                this.measureAreaActive = !this.measureAreaActive;
                this.$refs.openseadragon.beginMeasuringArea(this.measureAreaActive);
            }
        },
        clearMeasure() {
            if (this.changeColor === 11) {
                this.changeColor = -1;
            } else {
                this.changeColor = 11;
                this.$refs.openseadragon.removeAllMeasureAnnotations();
                this.__clearAllDrawingTools();
                this.$refs.openseadragon.panToggle(true);
            }
        },
        goHome() {
            if (this.changeColor === 17) {
                this.changeColor = -1;
            } else {
                this.changeColor = 17;
                this.$refs.openseadragon.goHome();
            }
        },
        hideCallout() {
            if (!this.ifhideCallout) {
                this.changeColor = 8;
                this.ifhideCallout = true;
                this.annotationsDataInit = [];
            } else {
                this.ifhideCallout = false;
                this.changeColor = -1;
                this.annotationsDataInit = this.annotationsData;
            }
        },
        rotateRight() {
            this.changeColor = 18;
            if (this.viewerAngleCopy) {
                this.viewerAngle += this.viewerAngleCopy;
            } else {
                this.viewerAngle += 5;
            }
            this.viewerAngle %= 360;
            this.$refs.openseadragon.setRotation(this.viewerAngle);
        },
        rotateLeft() {
            this.changeColor = 19;
            if (this.viewerAngleCopy) {
                this.viewerAngle -= this.viewerAngleCopy;
            } else {
                this.viewerAngle -= 5;
            }
            this.viewerAngle %= 360;
            this.$refs.openseadragon.setRotation(this.viewerAngle);
        },
        // 右侧AI智能预测开关
        drawerAi() {
            if (!this.drawer && this.switchValue.AIAnalysis) {
                this.changeColor = 12;
                this.getAIAnnotations();
            } else {
                this.changeColor = -1;
                this.aiAnnotationsData = [];
                // AI定时器清除
                clearInterval(this.timer);
                this.timer = null;
            }
        },
        drawerMHAi() {
            if (this.changeColor === 39) {
                this.changeColor = -1;
                this.mhAnnotationsData = [];
            } else {
                this.changeColor = 39;
                this.getMhAnnotations();
            }
        },
        AIEvaluationClose() {
            this.visibleDict.AIEvaluationDialogList = false;
            this.changeColor = -1;
            document.addEventListener("keydown", this.watchEnter);
        },
        AIEvaluation() {
            if (this.visibleDict.AIEvaluationDialogList) {
                this.visibleDict.AIEvaluationDialogList = false;
                this.changeColor = -1;
                document.addEventListener("keydown", this.watchEnter);
            } else {
                this.changeColor = 24;
                this.visibleDict.AIEvaluationDialogList = true;
                this.getAIEvaluationList();
                document.removeEventListener("keydown", this.watchEnter);
            }
        },
        isShowSliceInfo() {
            if (this.visibleDict.isShowSliceInfoStatus) {
                this.visibleDict.isShowSliceInfoStatus = false;
                document.addEventListener("keydown", this.watchEnter);
                this.changeColor = -1;
            } else {
                this.changeColor = 33;
                this.visibleDict.isShowSliceInfoStatus = true;
                document.removeEventListener("keydown", this.watchEnter);
            }
        },
        electronicPointer() {
            if (this.changeColor === 25) {
                this.changeColor = -1;
                this.isAllowDrawLine = false;
            } else {
                this.changeColor = 25;
                this.isAllowDrawLine = true;
            }

            const theCanvas = document.getElementById("ruler-overlay");
            theCanvas.style.cursor = "url(/images/electronicPointer.png),default";
            // const ctx = theCanvas.getContext('2d');
            // this.changeMouseInit(ctx, theCanvas);
        },
        changeMouseInit(ctx, canvas) {
            var body = [];
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            var mouse_pos_x = canvas.width;
            var mouse_pos_y = canvas.height / 2;
            var delta = 1;
            var step = 0;
            var loop = 0;
            var line = 0;
            var lineMax = 20;
            var lineMin = 5;
            var TWO_PI = 2 * Math.PI;
            var t = 0;
            var op = 1;
            var bodyLength = 20;
            canvas.addEventListener("mousemove", mouse_track);
            function mouse_track(event) {
                if (
                    Math.abs(mouse_pos_x - event.clientX) > delta ||
                    Math.abs(mouse_pos_y - event.clientY) > delta
                ) {
                    mouse_pos_x = event.clientX;
                    mouse_pos_y = event.clientY;
                }
            }
            var red = [];
            var grn = [];
            var blu = [];
            const center = 128;
            const width = 127;
            const frequency1 = 0.3;
            const frequency2 = 0.3;
            const frequency3 = 0.3;
            const phase1 = 0;
            const phase2 = 2;
            const phase3 = 4;
            for (let s = 0; s < bodyLength; s++) {
                red[s] = Math.round(Math.sin(frequency1 * s + phase1) * width + center);
                grn[s] = Math.round(Math.sin(frequency2 * s + phase2) * width + center);
                blu[s] = Math.round(Math.sin(frequency3 * s + phase3) * width + center);
            }
            var size = Math.min(canvas.width, canvas.height) / 50;
            //See below
            var startX = canvas.width;
            var startY = canvas.height / 2;
            for (let i = 0; i < bodyLength; i++) {
                body.push({
                    x: startX,
                    y: startY,
                });
            }
            //****** DRAW ******//
            function draw() {
                t += 0.08;
                t = t % TWO_PI;
                if (line <= lineMin) {
                    op = 1;
                    line = lineMin + 1;
                }
                if (line >= lineMax) {
                    op = -1;
                    line = lineMax - 1;
                }
                loop++;
                if (loop == 5) {
                    step++;
                    step = step % bodyLength;
                    loop = 0;
                }

                line = op + line;
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;

                for (let i = body.length - 1; i > 0; i--) {
                    body[i].x = body[i - 1].x;
                    body[i].y = body[i - 1].y;
                }
                body[0].x = mouse_pos_x;
                body[0].y = mouse_pos_y;

                ctx.lineWidth = line;
                ctx.strokeStyle =
                    "rgb(" + red[step] + "," + grn[step] + "," + blu[step] + ")";
                ctx.fillStyle =
                    "rgb(" + red[step] + "," + grn[step] + "," + blu[step] + ")";
                //Draw leading circle
                ctx.beginPath();
                ctx.arc(body[0].x, body[0].y, line / 2, 0, TWO_PI);
                ctx.fill();
                //Draw line
                ctx.beginPath();
                ctx.moveTo(body[0].x, body[0].y);
                for (let s = 0; s < body.length - 2; s++) {
                    //Bezier curve along points taken from:
                    var xc = (body[s].x + body[s + 1].x) / 2;
                    var yc = (body[s].y + body[s + 1].y) / 2;
                    ctx.quadraticCurveTo(body[s].x, body[s].y, xc, yc);
                }
                ctx.stroke();
                //Draw trailing circle
                ctx.beginPath();
                ctx.arc(xc, yc, line / 2, 0, TWO_PI);
                ctx.fill();
                window.requestAnimationFrame(draw);
            }
            window.requestAnimationFrame(draw);
        },

        isShowDiagnosticBasis() {
            if (this.diagnosticBasisData.showStatus) {
                this.diagnosticBasisData.showStatus = false;
                this.changeColor = -1;
            } else {
                this.changeColor = 34;
                this.diagnosticBasisData.showStatus = true;
            }
        },
        showClinicalDialogVisible() {
            if (this.clinicalDialogVisible) {
                this.clinicalDialogVisible = false;
                this.changeColor = -1;
            } else {
                this.changeColor = 36;
                this.clinicalDialogVisible = true;
            }
        },
        AIEvaluationDialogShow() {
            if (this.visibleDict.AIEvaluationDialog) {
                this.visibleDict.AIEvaluationDialog = false;
                document.addEventListener("keydown", this.watchEnter);
            } else {
                Object.keys(this.AIEvaluationForm).forEach((key) => {
                    if (
                        key == "chronicInflammationAi" ||
                        key == "masculineAi" ||
                        key == "imAi" ||
                        key == "atrophyAi" ||
                        key == "activityAi" ||
                        key == "hpai" ||
                        key == "alienGrowthAi" ||
                        key == "pathologyId" ||
                        key == "evaluateExpert" ||
                        key == "sliceName"
                    ) {
                    } else {
                        this.AIEvaluationForm[key] = "";
                    }
                });
                this.AIEvaluationForm.pathologyId = this.pathologyId;
                this.AIEvaluationForm.evaluateExpert = this.userName;
                this.visibleDict.AIEvaluationDialog = true;
                document.removeEventListener("keydown", this.watchEnter);
                this.btnSureShow = true;
                this.$axios({
                    method: "GET",
                    url: `/evaluate/get/by/biopsy/${this.biopsyId}`,
                }).then(
                    (res) => {
                        if (res.data.data && res.data.code === 200) {
                            this.AIEvaluationForm = res.data.data;
                        }
                    },
                    (err) => {
                        this.$message.info(err.response.data.message);
                    }
                );
            }
        },
        analysisAI() {
            if (this.Ifanalysis) {
                this.Ifanalysis = false;
                this.changeColor = -1;
            } else {
                this.changeColor = 20;
                this.Ifanalysis = true;
            }
        },
        patienterListMethod() {
            this.changeColor = 2;
            this.visibleDict.patienterList = true;
            const _this = this;
            document.removeEventListener("keydown", _this.watchEnter);
        },
        DiagnosisListclosed() {
            this.visibleDict.patienterList = false;
            this.changeColor = -1;
            const _this = this;
            document.addEventListener("keydown", _this.watchEnter);
        },
        patienterDetailMethod() {
            this.changeColor = 4;
            this.visibleDict.patienterDetail = true;
            const _this = this;
            document.removeEventListener("keydown", _this.watchEnter);
            console.log("patienterDetailMethod", this.visibleDict.patienterDetail);
        },
        patienterDetailclosed() {
            this.visibleDict.patienterDetail = false;
            this.changeColor = -1;
            const _this = this;
            document.addEventListener("keydown", _this.watchEnter);
            console.log("patienterDetailclosed", this.visibleDict.patienterDetail);
        },
        selectStyle(item) {
            const _this = this;
            this.$nextTick(function () {
                this.annotationsData.forEach((item1) => {
                    _this.$set(item1, "active", false);
                });
                // this.$set(item, "active", true);
            });
        },
        outStyle(item) {
            this.$set(item, "active", false);
        },
        hotkeyMethods() {
            this.changeColor = 16;
            this.hotkey = true;
        },
        hotkeyclosed() {
            this.changeColor = -1;
            this.hotkey = false;
        },
        updateDiagnoseCollection(diagnosisId) {
            // this.collectionDignosis.addOrUpdate(
            //   this.$route.query.userId,
            //   {
            //     diagnosisId,
            //   },
            //   true
            // );
        },
        getBiopsyNoPathologyId() {
            this.openseadragonIsShow = false;
            const filename = this.$route.query.fileName;
            const isSdpc = filename.endsWith("sdpc");
            this.sourceType = isSdpc ? "IIIF" : "DZI";
            this.dziUrl = `${this.pathologyServiceURL}/images/${filename}.dzi`;
            if (isSdpc) {
                this.getImageInfo(filename);
            } else {
                this.newTimer = new Date().getTime();
                this.openseadragonIsShow = true;
            }
            this.$refs.openseadragon.open(
                `${this.pathologyServiceURL}/images/${filename}.dzi`
            );
            this.ifOpenseadragon = true;
        },
        getBiopsy(id) {
            const pDiagnosisType = sessionStorage.getItem("pDiagnosisType");
            console.log("pDiagnosisType", pDiagnosisType);
            if (id != "null") {
                this.$axios({
                    method: "GET",
                    url: "/diagnosis/single",
                    params: {
                        pathologyId: id,
                        pDiagnosisType: pDiagnosisType,
                    },
                }).then((res) => {
                    // 请求失败
                    if (res.data.code !== 200) {
                        throw new Error(res.data);
                    }
                    // 请求成功
                    const result = res.data.data;
                    this.prevPathologyId = result.previousPathologyId;
                    this.nextPathologyId = result.nextPathologyId;
                    this.diagnosisId = result.id;
                    if (result.collectionId) {
                        this.isCollected = result.collectionId;
                    } else {
                        this.isCollected = null;
                    }
                    this.biopsyList = result.biopsyList;
                    //   this.currentPath = result.biopsyList[0];
                    this.currentLevelLabel = result.currentLevelLabel;

                    this.specimenType = result.specimenType;

                    //查询每个切片的阴阳性
                    if (
                        this.specimenType === 1577 ||
                        this.specimenType === 1579 ||
                        this.specimenType === 1565 ||
                        this.specimenType === 1567
                    ) {
                        this.yinYangStatus();
                    }

                    // 诊断详情
                    this.pathologyId = id;
                    // 发送更新请求
                    if (this.collectionDignosis) {
                        this.updateDiagnoseCollection(this.pathologyId);
                    }
                    result.currentCountVersusTotal = result.currentCountVersusTotal
                        ? result.currentCountVersusTotal
                        : "0/0";
                    this.info = `
                        <span> 当前第 </span><span style="color:#000;font-size:18px;color:#10a1df">${result.currentCountVersusTotal.split("/")[0]
                        }</span><span > 例 / 共 </span><span style="color:#000;font-size:18px;color:#10a1df">${result.currentCountVersusTotal.split("/")[1]
                        }</span><span> 例 </span>&nbsp&nbsp
                        病理号:${result.pathologyId}&nbsp&nbsp
                        <font style="padding: 0 4px; color: #F56C6C;"> ${result.name ? result.name : "暂无"
                        }</font>
                        <font style="padding: 0 4px; color: #F56C6C;">${result.sexName ? result.sexName : "暂无"
                        }</font>
                        <font style="padding: 0 4px; color: #F56C6C;">${result.age ? result.age : "暂无"
                        }</font>
                        <font style="padding: 0 4px; color: #F56C6C;">${result.ageUnitName && result.age
                            ? result.ageUnitName
                            : ""
                        }</font>
                        <font style="padding: 0 4px;">${result.bedId ? result.bedId : ""
                        }</font>
                        <font style="padding: 0 4px; color: #F56C6C;"> ${result.freezeTypeName ? result.freezeTypeName : ""
                        }</font>
                        检查类型:${result.checkCategoryName
                            ? result.checkCategoryName
                            : ""
                        }&nbsp&nbsp
                        标本类别: ${result.specimenTypeName
                            ? result.specimenTypeName
                            : "暂无"
                        }&nbsp&nbsp
                        取材脏器:${result.sampleOrganName
                            ? result.sampleOrganName
                            : "暂无"
                        } &nbsp&nbsp
                        送检医生:${result.sendDoctor ? result.sendDoctor : "暂无"
                        }&nbsp&nbsp
                        送检科室: 暂无 &nbsp&nbsp
                        临床诊断:${result.pathologyClinicalDiagnosis
                            ? result.pathologyClinicalDiagnosis
                            : "暂无"
                        }
                        &nbsp&nbsp
                        状态:${result.currentLevelLabel
                            ? result.currentLevelLabel
                            : "暂无"
                        }&nbsp&nbsp
                        取材时间:${result.createTime ? result.createTime : "暂无"
                        }&nbsp&nbsp
                        `;

                    // 通过切片获取标注
                    if (id === this.$route.query.pathologyId) {
                        result.biopsyList.forEach((element, index) => {
                            if (element.newFilename === this.$route.query.fileName) {
                                this.getAnnotations(
                                    element.id,
                                    element.newFilename,
                                    element.originFilename,
                                    element.labelUrl,
                                    index
                                );
                            }
                        });
                    } else if (
                        id !== this.$route.query.pathologyId &&
                        result.biopsyList.length > 0
                    ) {
                        // 重新获取标注
                        this.getAnnotations(
                            result.biopsyList[0].id,
                            result.biopsyList[0].newFilename,
                            result.biopsyList[0].originFilename,
                            result.biopsyList[0].labelUrl
                        );
                    } else {
                        this.ifOpenseadragon = false;
                        this.labelUrl = "";
                        this.annotationsDataInit = [];
                        this.annotationsData = [];
                        this.$message.info("该诊断无切片");
                    }
                    //从上一页点哪个切片 切片浏览器哪张切片类是isActive  红框
                    const index = _.findIndex(this.biopsyList, {
                        id: this.biopsyId,
                    });
                    this.isActive = index;
                });
            }
        },

        // 界面左侧，  点击获取标注 biopsyID切片Id 切片新名字 切片老名字 切片信息图片url
        getAnnotations(
            biopsyID,
            biopsyfileName,
            biopsyOriginFilename,
            labelUrl,
            index
        ) {
            this.biopsyName = biopsyfileName;
            this.openseadragonIsShow = false;
            if (biopsyfileName !== null && biopsyOriginFilename !== null) {
                this.biopsyId = biopsyID;
                this.biopsyOriginFilename = biopsyOriginFilename;
                this.labelUrl = labelUrl;
                if (this.drawer) {
                    this.getAIAnnotations();
                }
            }
            // 重新打开切片
            let myFile = "";
            this.biopsyList.forEach((item) => {
                if (item.id == biopsyID) {
                    myFile = item.newFilename;
                }
            });
            this.dziUrl = `${this.pathologyServiceURL}/images/${myFile}.dzi`;
            const filename = biopsyfileName;
            const isSdpc = filename.endsWith("sdpc");
            this.sourceType = isSdpc ? "IIIF" : "DZI";
            if (isSdpc) {
                this.getImageInfo(filename);
            } else {
                this.newTimer = new Date().getTime();
                this.openseadragonIsShow = true;
            }
            if (index || index == 0) {
                this.isActive = index;
            } else {
                this.isActive = 0;
            }

            this.annotationsDataInit = [];
            this.annotationsData = [];

            this.$axios({
                method: "GET",
                url: `/biopsy/single/${biopsyID}`,
            }).then((resp) => {
                // 请求失败
                if (resp.data.code !== 200) {
                    throw new Error(resp.data);
                }
                // 请求成功
                this.AIEvaluationForm.sliceName = resp.data.data.originFilename;
                this.getSliceInfoInfo(biopsyID);
                // 数据处理
                resp.data.data.annotationsList.forEach((ele) => {
                    const temPoints = [];
                    const areaInfo = {
                        width: ele.extraMessageJson
                            ? (ele.extraMessageJson.width * 1000000).toFixed(3)
                            : "",
                        height: ele.extraMessageJson
                            ? (ele.extraMessageJson.height * 1000000).toFixed(3)
                            : "",
                        area: ele.extraMessageJson
                            ? (ele.extraMessageJson.area * 1000000 * 1000000).toFixed(3)
                            : "",
                    };
                    ele.pointsJson.forEach((item) => {
                        const coord1 = ["points", item[0], item[1]];
                        temPoints.push(coord1);
                    });
                    const object = {
                        annotationId: ele.id,
                        createAt: ele.createTime,
                        saveUser: ele.createUserId,
                        remarkOne: ele.remarkOne,
                        remarkTwo: ele.remarkTwo,
                        classToSet: {
                            color: "#b31a1a",
                            name: "胃癌",
                        },
                        points: temPoints,
                        name: "胃癌",
                        children: ele.childrenJson,
                        show: true,
                        saveUserName: ele.createUserName,
                        type: ele.extraMessageJson.type,
                        imageUrl: this.ImageServiceURL + ele.imageUrl,
                        extraMessageJson: ele.extraMessageJson,
                        areaInfo,
                    };
                    this.annotationsData.push(object);
                    this.annotationsDataInit = _.cloneDeep(this.annotationsData);
                });
                // this.collectionAnnotationImages.addOrUpdate(
                //   this.$route.query.userId,
                //   {
                //     annotationsData: this.annotationsData,
                //   },
                //   true
                // );
            });
            // this.$refs.openseadragon.open(
            //     `${this.pathologyServiceURL}/images/${myFile}.dzi`
            // );
            this.ifOpenseadragon = true;
            this.drawerAi();
        },
        annotationDrawingEnd(annotations) {
            annotations.forEach((temp) => {
                if (!temp.show) {
                    this.newannotations.push(temp);
                    this.visibleDict.annotationsWarn = true;
                }
            });
            if (this.switchValue.groupMark && !!this.groupMark.note) {
                this.mark.warning = this.groupMark.note;
                this.mark.remark = this.groupMark.remark;
            }
        },
        measureAnnotationDrawingEnd(annotations) {
            annotations.forEach((temp) => {
                if (!temp.show) {
                    this.newannotations.push(temp);
                    this.visibleDict.annotationsWarn = true;
                }
            });
            if (this.switchValue.groupMark && !!this.groupMark.note) {
                this.mark.warning = this.groupMark.note;
                this.mark.remark = this.groupMark.remark;
            }
        },
        //画圈请求分析
        mhAnnotationDrawingEnd(annotations) {
            this.mhAnnotationsDataDrawEnd = annotations;
            if (this.changeColor === 37) {
                this.loading = true;
                let Mpoints = [];
                annotations[annotations.length - 1].points.forEach((item) => {
                    Mpoints.push({ X: item.x, Y: item.y });
                });
                console.log("Mpoints", Mpoints);
                let mData = {
                    biopsyName: this.biopsyName,
                    biopsyId: this.biopsyId,
                    xmlText: JSON.stringify(Mpoints),
                };
                this.$axios({
                    method: "POST",
                    url: `/mhIndex/tagging`,
                    data: mData,
                }).then((res) => {
                    if (res && res.data.code === 200) {
                        this.loading = false;
                        this.$message.success("分析需要耗时，请等待1分钟后再查看");
                    } else {
                        this.$message.warning(res.data.message);
                    }
                });
            }
        },
        // 获取mh标注
        getMhAnnotations() {
            let _this = this;
            _this.loading = true;
            _this.mhAnnotationsData = [];
            this.$axios({
                method: "GET",
                url: `/mhIndex/list/${this.biopsyId}`,
            }).then((res) => {
                if (res && res.data.code === 200) {
                    let i = 1;
                    res.data.data.forEach((ele) => {
                        const temPoints = [];
                        JSON.parse(ele.xmlText).forEach((item) => {
                            const coord1 = ["points", item.X, item.Y];
                            temPoints.push(coord1);
                        });
                        const object = {
                            annotationId: i++,
                            classToSet: {
                                color: "#0000FF",
                                name: "MH",
                            },
                            points: temPoints,
                            name: "MH结果",
                            show: true,
                            type: "Polygon",
                        };
                        _this.mhAnnotationsData.push(object);
                    });
                    _this.loading = false;
                } else {
                    this.$message.warning(res.data.message);
                }
            });
        },
        getMhIndexList() {
            if (this.changeColor === 38) {
                this.changeColor = -1;
            } else {
                this.changeColor = 38;
                this.cancelAnn();
                this.$refs.openseadragon.zoomJumpTo(2.5);
                let _this = this;
                _this.mhAnnotationsData = [];

                this.$axios({
                    method: "GET",
                    url: `/mhIndex/list/${this.biopsyId}`,
                }).then((res) => {
                    if (res && res.data.code === 200) {
                        let i = 1;
                        res.data.data.forEach((ele) => {
                            const temPoints = [];
                            JSON.parse(ele.xmlText).forEach((item) => {
                                const coord1 = ["points", item.X, item.Y];
                                temPoints.push(coord1);
                            });
                            const object = {
                                annotationId: i++,
                                classToSet: {
                                    color: "#0000FF",
                                    name: "MH",
                                },
                                points: temPoints,
                                name: "MH结果",
                                show: true,
                                type: "",
                            };
                            _this.mhAnnotationsData.push(object);
                        });

                        this.MHData = res.data.data.map((item, index) => {
                            return { ...item, index: index + 1 };
                        });
                        this.mhDialogVisible = true;
                    } else {
                        this.$message.warning(res.data.message);
                    }
                });
            }
        },
        //MHdialog框内表格的操作 回显
        resetOnePoint(row) {
            this.mhDialogVisible = false;
            this.mhAnnotationsData = [];
            const temPoints = [];
            JSON.parse(row.xmlText).forEach((item) => {
                const coord1 = ["points", item.X, item.Y];
                temPoints.push(coord1);
            });
            const object = {
                annotationId: 1,
                classToSet: {
                    color: "#0000FF",
                    name: "MH",
                },
                points: temPoints,
                name: "MH结果",
                show: true,
                type: "Polygon",
            };
            this.mhAnnotationsData.push(object);

            const val = this.mhAnnotationsDataDrawEnd[row.index - 1];
            this.$refs.openseadragon.jumpToArea(
                val.data.minX,
                val.data.minY,
                val.data.minX + val.data.pixelsWidth,
                val.data.minY + val.data.pixelsHeight
            );
        },
        deletePoint(row) {
            this.$axios({
                method: "delete",
                url: `/mhIndex/${row.id}`,
            }).then(
                (res) => {
                    if (res && res.data.code === 200) {
                        this.getMhAnnotations();
                        this.$message.success("删除成功");
                    }
                },
                (err) => {
                    this.$message.info(`${err.response.data.message}`);
                }
            );
        },
        //关闭MHdialog框
        closeMHDialog() {
            this.changeColor = -1;
        },

        // 1.画画工具画笔标注， 标注完成后， 删除标注的时候触发， 2. 跳转
        aiAnnotationDrawingEnd(AIannotations) {
            console.log("1111111111111111", AIannotations);
            if (AIannotations.length > 0) {
                AIannotations.forEach((item, index) => {
                    item["inIndex"] = index + 1;
                });
                this.AIdata = AIannotations;
                this.drawer = true;
                this.currentSuspicious = this.AIdata[0];
            } else {
                this.drawer = false;
            }
        },
        //  画画工具画笔标注， 点击他的时候触发
        uploadAnnotation(annotation) {
            debugger
            const { x, y, width, height } =
                annotation.option.type == "circle"
                    ? annotation.circlePath.bounds
                    : annotation.path.bounds;
            const imgURL = this.$refs.openseadragon.getImage(x, y, width, height);

            const MIME_TYPE = "image/png";
            const dlLink = document.createElement("a");
            //   dlLink.download = '123.png';
            this.newPic = imgURL;
            dlLink.href = imgURL;
            dlLink.dataset.downloadurl = [
                MIME_TYPE,
                dlLink.download,
                dlLink.href,
            ].join(":");

            document.body.appendChild(dlLink);
            dlLink.click();
            document.body.removeChild(dlLink);
        },
        jumpToNumber(val) {
            const pDiagnosisType = sessionStorage.getItem("pDiagnosisType");
            this.$axios({
                method: "get",
                url: `/diagnosis/id/by/rank/${val}/${pDiagnosisType}`,
            }).then(
                (res) => {
                    if (res && res.data.code === 200) {
                        sessionStorage.setItem("pathologyId", res.data.data);

                        this.getBiopsy(res.data.data);
                    }
                },
                (err) => {
                    this.$message.info(`${err.response.data.message}`);
                }
            );
        },
        // 取消标注
        cancelAnn() {
            this.__clearAllDrawingTools();
            this.$refs.openseadragon.panToggle(true);
        },
        Submit() {
            if (!this.validateForm()) {
                return;
            }
            this.groupMark.note = this.mark.warning;
            this.groupMark.remark = this.mark.remark;
            this.visibleDict.annotationsWarn = false;
            this.uploadPic(this.newPic);
        },
        // 提交标注
        submitAnnotation(uploadPictTemp) {
            const temp = this.newannotations[this.newannotations.length - 1];
            const pointsTmp = [];
            const Annotationinfo = {
                minX: temp.data.minX,
                minY: temp.data.minY,
                pixelsWidth: temp.data.pixelsWidth,
                pixelsHeight: temp.data.pixelsHeight,
                pixelsArea: temp.data.pixelsArea,
                width: temp.data.width,
                height: temp.data.height,
                area: temp.data.area,
                type: temp.option.type,
            };
            temp.points.forEach((ele) => {
                pointsTmp.push([ele.x, ele.y]);
            });
            const postdata = {
                points: JSON.stringify(pointsTmp),
                children: JSON.stringify([]),
                diagnosisId: this.diagnosisId,
                imageUrl: uploadPictTemp,
                extraMessage: JSON.stringify(Annotationinfo),
                remarkOne: this.mark.warning,
                remarkTwo: this.mark.remark,
            };
            try {
                this.$axios({
                    method: "post",
                    // url: ` /biopsy/${this.biopsyId}/annotations`,
                    url: `/annotations/biopsy/${this.biopsyId}/annotations`,
                    data: postdata,
                    headers: {
                        "Content-Type": "application/json",
                        authorization: this.$store.state.authorization,
                    },
                }).then(
                    (res) => {
                        if (res && res.data.code === 200) {
                            console.log(res);
                            this.newannotations = [];
                            this.mark.warning = "";
                            this.mark.remark = "";
                            const areaInfo = {
                                width: res.data.data.extraMessageJson
                                    ? (res.data.data.extraMessageJson.width * 1000000).toFixed(3)
                                    : "",
                                height: res.data.data.extraMessageJson
                                    ? (res.data.data.extraMessageJson.height * 1000000).toFixed(3)
                                    : "",
                                area: res.data.data.extraMessageJson
                                    ? (
                                        res.data.data.extraMessageJson.area *
                                        1000000 *
                                        1000000
                                    ).toFixed(3)
                                    : "",
                            };
                            const temPoints = [];
                            res.data.data.pointsJson.forEach((item) => {
                                const coord1 = ["points", item[0], item[1]];
                                temPoints.push(coord1);
                            });
                            const object = {
                                annotationId: res.data.data.id,
                                createAt: res.data.data.createTime,
                                saveUser: res.data.data.createUserId,
                                remarkOne: res.data.data.remarkOne,
                                remarkTwo: res.data.data.remarkTwo,
                                points: temPoints,
                                classToSet: {
                                    color: "#b31a1a",
                                    name: "胃癌",
                                },
                                name: "胃癌",
                                show: true,
                                saveUserName: res.data.data.createUserName,
                                // type: "polygon",
                                type: res.data.data.extraMessageJson.type,
                                imageUrl: this.ImageServiceURL + res.data.data.imageUrl,
                                extraMessageJson: res.data.data.extraMessageJson,
                                areaInfo,
                            };
                            this.annotationsData.push(object);
                            // this.collectionAnnotationImages.addOrUpdate(
                            //   this.$route.query.userId,
                            //   {
                            //     annotationsData: this.annotationsData,
                            //   },
                            //   true
                            // );
                        }
                    },
                    (err) => {
                        this.newannotations = [];
                        this.mark.warning = "";
                        this.mark.remark = "";
                        this.$message.info(`新增失败 ${err.response.data.message}`);
                    }
                );
            } catch (e) {
                console.log("请求失败");
            }
        },
        // 上传切片图片
        uploadPic(imgBase) {
            try {
                const data1 = { imgBase64: imgBase };
                this.$axios({
                    method: "post",
                    // url: "/PROXY-annotationPicService/base/upload",
                    url: `${this.ImageServiceURL}/base/upload`,
                    data: qs.stringify(data1),
                    headers: {
                        defaultHeader: false,
                        "Content-Type": "application/x-www-form-urlencoded",
                    },
                }).then(
                    (res) => {
                        if (res.data.status === "success") {
                            const uploadPictTemp = res.data.url.slice(
                                res.data.url.indexOf("_") - 1
                            );
                            console.log("upload success", res.data.url);
                            console.log("uploadPictTemp", uploadPictTemp);
                            this.annotationImages.push(res.data.url);
                            this.submitAnnotation(uploadPictTemp);
                        }
                    },
                    (err) => {
                        this.$message.info(`标注图新增失败${err.response.data}`);
                    }
                );
            } catch (e) {
                console.log("请求失败");
            }
        },
        annotationsWarnCancel() {
            this.$refs.openseadragon.panToggle(true);
            const { id } = this.newannotations[this.newannotations.length - 1];
            this.$refs.openseadragon.removeAnnotation(id);
            this.visibleDict.annotationsWarn = false;
        },
        // 全屏
        sreenFull() {
            if (
                !document.fullscreenElement &&
                !document.msFullscreenElement &&
                !document.mozFullScreenElement &&
                !document.webkitFullscreenElement
            ) {
                let docElm = document.documentElement;
                this.changeColor = 15;
                if (docElm.requestFullscreen) {
                    docElm.requestFullscreen();
                } else if (docElm.msRequestFullscreen) {
                    // IE
                    docElm = document.body; // overwrite the element (for IE)
                    docElm.msRequestFullscreen();
                } else if (docElm.mozRequestFullScreen) {
                    // 火狐
                    docElm.mozRequestFullScreen();
                } else if (docElm.webkitRequestFullScreen) {
                    // 谷歌
                    docElm.webkitRequestFullScreen();
                }
            } else if (document.exitFullscreen) {
                this.changeColor = -1;
                document.exitFullscreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen();
            }
        },
        // 截图
        screenshot() {
            document.removeEventListener("keydown", this.watchEnter);
            this.changeColor = 13;
            $("#drawRectCanvas").show();
            const shadeCs1 = document.getElementById("shadeCanvas");
            const shadeContext1 = shadeCs1.getContext("2d");
            // 填充页面覆盖色
            shadeContext1.fillStyle = "rgba(43, 42, 42, 0.5)";
            shadeContext1.fillRect(0, 0, shadeCs1.width, shadeCs1.height);
            $("#shadeCanvas").show();
            const color = "white";
            const penWidth = 1;
            const rectCanvas = document.getElementById("drawRectCanvas");
            // canvas 的矩形框
            const canvasRect = rectCanvas.getBoundingClientRect();
            // canvas 矩形框的左上角坐标
            const canvasLeft = canvasRect.left;
            const canvasTop = canvasRect.top;
            let lastWidth = 0;
            let lastHeight = 0;
            // 要画的矩形的起点 xy
            let width = 0;
            let height = 0;
            let x = 0;
            let y = 0;
            // 鼠标点击按下事件，画图准备
            rectCanvas.onmousedown = function (e) {
                // 设置遮罩层填充色
                const shadeCs = document.getElementById("shadeCanvas");
                const shadeContext = shadeCs.getContext("2d");
                // 确定起点
                x = e.clientX;
                y = e.clientY;
                // 添加layer
                $("#drawRectCanvas").addLayer({
                    type: "rectangle",
                    strokeStyle: color,
                    strokeWidth: penWidth,
                    name: "areaLayer",
                    fromCenter: false,
                    x,
                    y,
                    width: 1,
                    height: 1,
                });
                // 绘制
                $("#drawRectCanvas").drawLayers();
                $("#drawRectCanvas").saveCanvas();
                // 鼠标移动事件，画图
                // eslint-disable-next-line no-shadow
                rectCanvas.onmousemove = function (e) {
                    lastWidth = width;
                    lastHeight = height;
                    // 要画的矩形的宽高
                    width = e.clientX - canvasLeft - x;
                    height = e.clientY - canvasTop - y;
                    shadeContext.fillRect(x, y, lastWidth, lastHeight);
                    // 清楚上一次鼠标移动画的框
                    $("#drawRectCanvas").removeLayer("areaLayer");
                    $("#drawRectCanvas").addLayer({
                        type: "rectangle",
                        strokeStyle: color,
                        strokeWidth: penWidth,
                        name: "areaLayer",
                        fromCenter: false,
                        x,
                        y,
                        width,
                        height,
                    });
                    $("#drawRectCanvas").drawLayers();
                    shadeContext.clearRect(x, y, width, height);
                };
            };
            const that = this;
            rectCanvas.onmouseup = function (e) {
                rectCanvas.onmousemove = null;
                width = e.clientX - canvasLeft - x;
                height = e.clientY - canvasTop - y;
                $("#drawRectCanvas").removeLayer("areaLayer");
                $("#drawRectCanvas").addLayer({
                    type: "rectangle",
                    strokeStyle: color,
                    strokeWidth: penWidth,
                    name: "areaLayer",
                    fromCenter: false,
                    x,
                    y,
                    width,
                    height,
                });
                $("#drawRectCanvas").drawLayers();
                $("#drawRectCanvas").saveCanvas();
                $("#canvasToolbar").css("display", "block");
                $("#canvasToolbar").css(
                    "left",
                    `${width > 0 ? x + width : Math.abs(width + x) + Math.abs(width)}px`
                );
                $("#canvasToolbar").css("top", `${height > 0 ? height + y : y}px`);
                $("#drawRectCanvas").hide();
                // 移除画的选取框
                $("#drawRectCanvas").removeLayer("areaLayer");
                // 隐藏画框的canvass
                $("#drawRectCanvas").hide();
                // 添加描述输入框
                const pr = $("#prescription");
                // 横向排列
                pr.css("display", "flex"); // 横向排列
                pr.css("justify-content", "center"); // 横向排列居中
                pr.css("z-index", 9999); // 浮动在最上层
                pr.css("position", "absolute");
                pr.css("border", "none"); // 去掉边框
                pr.css(
                    "font-size",
                    `${(Math.abs(width) / document.body.clientWidth) * 100}%`
                ); // 文字大小
                pr.css("left", `${width > 0 ? x : Math.abs(width + x)}px`);
                pr.css("top", `${height > 0 ? height + y : y}px`);
                pr.css("width", `${Math.abs(width)}px`);
                $("#prescription").on("keydown", () => {
                    if (e.keyCode === 27) {
                        // $('#screenPC').trigger('click');
                        $("#cancel").trigger("click");
                    }
                });
                $("#SCinputBox").focus(); // 描述输入框获取焦点
                // 重置描述框的内容viewZoomNumber
                $("#rate")[0].innerText = `倍率:${document.getElementById("viewZoomNumber").innerText
                    }`; // 倍率
                const nowDate = new Date();
                const year = nowDate.getFullYear();
                const month = `0${nowDate.getMonth() + 1}`.substr(-2, 2);
                const date = `0${nowDate.getDate()}`.substr(-2, 2);
                const hour = `0${nowDate.getHours()}`.substr(-2, 2);
                const minute = `0${nowDate.getMinutes()}`.substr(-2, 2);
                const second = `0${nowDate.getSeconds()}`.substr(-2, 2);
                $(
                    "#screenshotTime"
                )[0].innerText = `${year}-${month}-${date} ${hour}:${minute}:${second}`; // 截屏时间
                $("#SCinputBox")[0].innerText = ""; // 输入框内容置空
                // 重置信息框样式框的内容
                $("#rate").css("width", "100%");
                $("#screenshotTime").css("width", "100%");
                // 判断倍率框或者日期框的字数超过1行，则重新布局
                // eslint-disable-next-line radix
                if (
                    Math.ceil(
                        $("#rate").height() /
                        parseInt($("#rate").css("line-height").replace("px", ""))
                    ) > 1 ||
                    Math.ceil(
                        $("#screenshotTime")
                            // eslint-disable-next-line radix
                            .height() /
                        parseInt(
                            $("#screenshotTime").css("line-height").replace("px", "")
                        )
                    ) > 1
                ) {
                    pr.css("display", "");
                    pr.css("justify-content", "");
                } else {
                    $("#rate").css("width", "300px");
                    $("#screenshotTime").css("width", "500px");
                }
                // 鼠标抬起
                that.initWidth = width;
                that.initHeight = height;
                that.initX = x;
                that.initY = y;
                console.log(x, y, width, height);
            };
        },
        clipImage(x, y, width, height) {
            html2canvas(document.querySelector("body"), { scale: 1, dpi: 300 }).then(
                (canvas) => {
                    const scale = window.devicePixelRatio;
                    const clipCanvas = document.createElement("canvas");
                    clipCanvas.width = width * scale;
                    clipCanvas.height = height * scale;
                    const context = clipCanvas.getContext("2d");
                    context.scale(1 / scale, 1 / scale);
                    context.drawImage(
                        canvas,
                        x * scale,
                        y * scale,
                        width * scale,
                        height * scale,
                        0,
                        0,
                        width * scale,
                        height * scale
                    );
                    const clipedImageBase64 = clipCanvas.toDataURL();
                    const img = document.createElement("a");
                    img.href = clipedImageBase64;
                    img.download = `${$("#SCinputBox")[0].innerText}.jpg`;
                    img.click();
                }
            );
        },
        sSuccess() {
            document.addEventListener("keydown", this.watchEnter);
            $("#canvasToolbar").css("display", "none");
            const captureX =
                this.initWidth > 0 ? this.initX : Math.abs(this.initX + this.initWidth);
            const captureY =
                this.initHeight > 0
                    ? this.initY
                    : Math.abs(this.initY + this.initHeight);
            this.clipImage(
                captureX,
                captureY,
                Math.abs(this.initWidth),
                Math.abs(this.initHeight) + $("#prescription").height()
            );
            const shadeCs = document.getElementById("shadeCanvas");
            const shadeContext = shadeCs.getContext("2d");
            shadeContext.clearRect(0, 0, shadeCs.width, shadeCs.height);
            $("#shadeCanvas").hide();
            $("#prescription").css("display", "none");
            this.changeColor = -1;
        },
        sCancel() {
            document.addEventListener("keydown", this.watchEnter);
            $("#canvasToolbar").css("display", "none");
            const shadeCs = document.getElementById("shadeCanvas");
            const shadeContext = shadeCs.getContext("2d");
            shadeContext.clearRect(0, 0, shadeCs.width, shadeCs.height);
            $("#shadeCanvas").hide();
            $("#prescription").css("display", "none");
            // 加上键盘监听事件
            this.changeColor = -1;
        },
        // 子组件AlFlaoting 调用
        jumpTo(val) {
            if (!!val) {
                this.currentSuspicious = val;
                console.log(val);
                this.$refs.openseadragon.jumpToArea(
                    val.data.minX,
                    val.data.minY,
                    val.data.minX + val.data.pixelsWidth,
                    val.data.minY + val.data.pixelsHeight
                );
                // AI标注闪烁
                const annotation = _.find(this.AIdata, { id: val.id });
                if (this.timer) {
                    clearInterval(this.timer);
                }
                this.timer = null;
                this.flag = true;
                if (!this.timerOne) {
                    this.timerOne = setInterval(() => {
                        this.AnnotationOpacity(annotation);
                    }, 150);
                }
                this.timer = setTimeout(() => {
                    clearInterval(this.timerOne);
                    this.timerOne = null;
                }, 700);
            }
        },
        // AI标注闪烁
        AnnotationOpacity(Annotation) {
            if (this.flag && this.switchValue.isFlicker) {
                Annotation.setOpacity(0);
                this.flag = false;
            } else if (this.switchValue.isFlicker) {
                Annotation.setOpacity(1);
                this.flag = true;
            }
        },
        //转化数字
        getProbablity(val) {
            var mNumber = Number(val);
            if (!isNaN(mNumber)) {
                return mNumber.toFixed(3);
            }
            return "0";
        },
        transferPositiveToNegative(value) {
            let isPositive = value.info.resultLevel.some(
                (item) => item.key === "属性" && item.value === "阳性"
            );
            let lessCount = 2;
            if (
                this.countOfTransferPostiveToNegativeList.length > 0 &&
                this.countOfTransferPostiveToNegativeList[0].label
            ) {
                lessCount = parseInt(
                    this.countOfTransferPostiveToNegativeList[0].label
                );
            }
            if (!isPositive) {
                return false;
            }
            let isCountLessThanSpecifcCount = value.annotations.length <= lessCount;
            if (isCountLessThanSpecifcCount) {
                return true;
            }
            return false;
        },

        // 获取AI标注
        getAIAnnotations() {
            // const c = this.biopsyOriginFilename.indexOf('.');
            // const name = this.biopsyOriginFilename.substring(0, c);

            let _this = this;
            _this.aiAnnotationsData = [];
            _this.doctorOpenViewerTime(_this.biopsyId);
            _this
                .$axios({
                    method: "GET",
                    url: `${_this.AnnotationsServiceURL}/annotations/results/aiprediction/${_this.biopsyId}`,
                })
                .then((res) => {
                    _this.F3AnalysisInfo = "";
                    if (res.data.code === 200) {
                        // 数据处理
                        console.log("获取AI标注", res.data);

                        if (
                            _this.specimenType === 1577 ||
                            _this.specimenType === 1579 ||
                            this.specimenType === 1565 ||
                            this.specimenType === 1567
                        ) {
                            _this.F3info = res.data.data.info;
                            //阴性片子默认四倍放大 pred是标本类型 为胃镜病理才有的字段
                            if (res.data.data.info.pred == 0) {
                                setTimeout(() => {
                                    _this.$refs.openseadragon.zoomJumpTo(4);
                                }, 1000);
                            }
                            let mTransger = _this.transferPositiveToNegative(res.data.data);
                            _this.F3info.resultLevel.forEach((item) => {
                                if (item.key === "属性") {
                                    if (mTransger) {
                                        item.value = "阴性";
                                    }
                                    _this.AIEvaluationForm.masculineAi = item.value;
                                }
                                if (item.key === "肠化") {
                                    _this.AIEvaluationForm.imAi = item.value;
                                }
                                if (item.key === "萎缩") {
                                    _this.AIEvaluationForm.atrophyAi = item.value;
                                }
                                if (item.key === "活动性") {
                                    _this.AIEvaluationForm.activityAi = item.value;
                                }
                                if (item.key === "慢性炎症") {
                                    _this.AIEvaluationForm.chronicInflammationAi = item.value;
                                }
                                if (item.key === "HP") {
                                    _this.AIEvaluationForm.hpai = item.value;
                                }
                                if (item.key === "异性增生") {
                                    _this.AIEvaluationForm.alienGrowthAi = item.value;
                                }

                                let mStr = "";
                                if (item.probablity) {
                                    mStr = "(" + _this.getProbablity(item.probablity) + ")";
                                }
                                _this.F3AnalysisInfo +=
                                    '<span style="margin-left:5px;color:#10a1df">' +
                                    item.key +
                                    "</span>" +
                                    ':<span style="margin-left:5px;color:#10a1df">' +
                                    item.value +
                                    mStr +
                                    "</span>";
                            });
                            if (!mTransger) {
                                let i = 1;
                                res.data.data.annotations.forEach((ele) => {
                                    const temPoints = [];
                                    ele.points.forEach((item) => {
                                        const coord1 = ["points", item[0], item[1]];
                                        temPoints.push(coord1);
                                    });
                                    const object = {
                                        annotationId: i++,
                                        classToSet: {
                                            color: ele.color,
                                            name: "人工智能",
                                        },
                                        points: temPoints,
                                        name: "人工智能结果1",
                                        show: true,
                                        type: ele.type,
                                        probablity: _this.getProbablity(ele.probability),
                                    };
                                    _this.aiAnnotationsData.push(object);
                                });
                            }
                        } else if (_this.specimenType === 1578) {
                            // _this.F3info.resultLevel.forEach((item) => {
                            //     let mStr = '';
                            //     if (item.probablity) {
                            //         mStr =
                            //             '(' +
                            //             _this.getProbablity(item.probablity) +
                            //             ')';
                            //     }
                            //     _this.F3AnalysisInfo +=
                            //         '<span style="margin-left:5px;color:#10a1df">' +
                            //         item.key +
                            //         '</span>' +
                            //         ':<span style="margin-left:5px;color:#10a1df">' +
                            //         item.value +
                            //         mStr +
                            //         '</span>';
                            // });
                            console.log(res.data.data.annotations);
                            res.data.data.annotations.forEach((item) => {
                                if (item.partOfGroup === "ASC-US") {
                                    this.tctPartOfGroup.arrayASCUS.push(item);
                                }
                                if (item.partOfGroup === "ASC-H") {
                                    this.tctPartOfGroup.arrayASCH.push(item);
                                }
                                if (item.partOfGroup === "LSIL") {
                                    this.tctPartOfGroup.arrayLSIL.push(item);
                                }
                                if (item.partOfGroup === "HSIL") {
                                    this.tctPartOfGroup.arrayHSIL.push(item);
                                }
                            });
                            let i = 1;
                            this.tctPartOfGroup.arrayASCUS.forEach((ele) => {
                                const temPoints = [];
                                ele.points.forEach((item) => {
                                    const coord1 = ["points", item[0], item[1]];
                                    temPoints.push(coord1);
                                });
                                const object = {
                                    annotationId: i++,
                                    classToSet: {
                                        // color: ele.color,
                                        color: "#FF0000", //tct 默认全红
                                        name: "人工智能",
                                    },
                                    points: temPoints,
                                    name: "人工智能结果1",
                                    show: true,
                                    type: ele.type,
                                    probablity: _this.getProbablity(ele.probability),
                                };
                                _this.aiAnnotationsData.push(object);
                            });
                        }
                    }
                });
        },
        clickPartOfGroup(name) {
            let _this = this;
            _this.aiAnnotationsData = [];
            let tctArr = [];
            if (name === "ASC-US") {
                tctArr = _this.tctPartOfGroup.arrayASCUS;
            }
            if (name === "ASC-H") {
                tctArr = _this.tctPartOfGroup.arrayASCH;
            }
            if (name === "LSIL") {
                tctArr = _this.tctPartOfGroup.arrayLSIL;
            }
            if (name === "HSIL") {
                tctArr = _this.tctPartOfGroup.arrayHSIL;
            }

            let i = 1;
            tctArr.forEach((ele) => {
                const temPoints = [];
                ele.points.forEach((item) => {
                    const coord1 = ["points", item[0], item[1]];
                    temPoints.push(coord1);
                });
                const object = {
                    annotationId: i++,
                    classToSet: {
                        // color: ele.color,
                        color: "#FF0000", //tct 默认全红
                        name: "人工智能",
                    },
                    points: temPoints,
                    name: "人工智能结果1",
                    show: true,
                    type: ele.type,
                    probablity: _this.getProbablity(ele.probability),
                };
                _this.aiAnnotationsData.push(object);
            });
        },
        mouseover() {
            this.styleObjectClass = {
                left: "0",
            };
        },
        mouseout() {
            this.styleObjectClass = {
                left: "-100px",
            };
        },
        viewZoom(data) {
            this.viewZoomNumber = data.toFixed(2);
        },
        handleClose() {
            this.mark.warning = "";
            this.mark.remark = "";
        },
        updateAnnotation(annotation) {
            this.mark.warning = annotation.remarkOne;
            this.mark.remark = annotation.remarkTwo;
            this.updateAnnInfo.area = annotation.areaInfo.area;
            this.updateAnnInfo.width = annotation.areaInfo.width;
            this.updateAnnInfo.height = annotation.areaInfo.height;
            this.updateAnnInfo.saveUserName = annotation.saveUserName;
            this.updateAnnInfo.createAt = annotation.createAt;
            this.updateAnnInfo.annotationId = annotation.annotationId;
            this.annDialogVisible = true;
            this.$refs.openseadragon.jumpToArea(
                annotation.extraMessageJson.minX,
                annotation.extraMessageJson.minY,
                annotation.extraMessageJson.minX +
                annotation.extraMessageJson.pixelsWidth,
                annotation.extraMessageJson.minY +
                annotation.extraMessageJson.pixelsHeight
            );
        },
        updateAnnSubmit(annotationId) {
            if (!this.validateForm()) {
                return;
            }
            const submitInfo = {
                remarkOne: this.mark.warning,
                remarkTwo: this.mark.remark,
            };
            try {
                this.$axios({
                    method: "put",
                    url: `/annotations/biopsy/${this.biopsyId}/annotations/${annotationId}`,
                    data: submitInfo,
                    headers: {
                        "Content-Type": "application/json",
                    },
                }).then(
                    (res) => {
                        if (res && res.data.code === 200) {
                            this.$message.success("更新成功");
                            const index = _.findIndex(this.biopsyList, {
                                id: this.biopsyId,
                            });
                            // if (index < this.biopsyList.length - 1) {
                            if (index < this.biopsyList.length) {
                                this.getAnnotations(
                                    this.biopsyList[index].id,
                                    this.biopsyList[index].newFilename,
                                    this.biopsyList[index].originFilename,
                                    this.biopsyList[index].labelUrl,
                                    index
                                );
                            } else {
                                this.getAnnotations(
                                    this.biopsyList[0].id,
                                    this.biopsyList[0].newFilename,
                                    this.biopsyList[0].originFilename,
                                    this.biopsyList[0].labelUrl,
                                    index
                                );
                            }
                            this.mark.remark = "";
                        }
                    },
                    (err) => {
                        this.$message.info(`更新失败  ${err.response.data.message}`);
                    }
                );
            } catch (e) {
                console.log(`请求失败  ${e}`);
            }
            this.annDialogVisible = false;
        },
        deleteAnnotation(annotationId) {
            this.$confirm("此操作将永久删除该标注, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    try {
                        this.$axios({
                            method: "delete",
                            url: `/annotations/biopsy/${this.biopsyId}/annotations/${annotationId}`,
                            data: {},
                        }).then(
                            (res) => {
                                if (res && res.data.code === 200) {
                                    this.$message.info("删除成功");
                                    this.annotationsData = this.annotationsData.filter((item) => {
                                        return annotationId != item.annotationId;
                                    });
                                    // const index = _.findIndex(this.biopsyList, {
                                    //     id: this.biopsyId,
                                    // });
                                    // if (index < this.biopsyList.length) {
                                    //     this.getAnnotations(
                                    //         this.biopsyList[index].id,
                                    //         this.biopsyList[index].newFilename,
                                    //         this.biopsyList[index]
                                    //             .originFilename,
                                    //         this.biopsyList[index].labelUrl,
                                    //         index
                                    //     );
                                    // } else {
                                    //     this.getAnnotations(
                                    //         this.biopsyList[0].id,
                                    //         this.biopsyList[0].newFilename,
                                    //         this.biopsyList[0].originFilename,
                                    //         this.biopsyList[0].labelUrl,
                                    //         index
                                    //     );
                                    // }
                                } else {
                                    this.$message.info(res.data.message);
                                }
                            },
                            (err) => {
                                this.$message.info(`删除失败  ${err.response.data.message}`);
                            }
                        );
                    } catch (e) {
                        console.log("请求失败");
                    }
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        findTagName() {
            const x = document.activeElement.tagName;
            const _this = this;
            if (
                x === "INPUT" ||
                x === "TEXTAREA" ||
                document.activeElement.id === "SCinputBox"
            ) {
                document.removeEventListener("keydown", _this.watchEnter);
            } else {
                document.addEventListener("keydown", _this.watchEnter);
            }
        },
        diagnosisLast() {
            if (this.prevPathologyId) {
                sessionStorage.setItem("pathologyId", this.prevPathologyId);
                this.getBiopsy(this.prevPathologyId);
                this.$refs.viewerDiagnosticBasis.init();
            } else {
                this.$message.info("上一个诊断无数据");
            }
        },
        diagnosisNext() {
            if (this.nextPathologyId) {
                sessionStorage.setItem("pathologyId", this.nextPathologyId);
                this.getBiopsy(this.nextPathologyId);
                this.$refs.viewerDiagnosticBasis.init();
            } else {
                this.$message.info("下一个诊断无数据");
            }
        },
        // 监听回车按钮事件
        watchEnter(e) {
            if (
                !this.pathologyId ||
                Object.values(this.visibleDict).indexOf(true) !== -1
            ) {
                //限制热键
                return;
            }
            const keyNum = window.event ? e.keyCode : e.which; // 获取被按下的键值
            const altKey = e.altKey;
            /*Enter-13,F1-112,F2-113,F3-114,1-49,2-50,3-51,4-52,5-53,6-54,Spacebar-32,E-69,Q-81,Tab-9,Esc-27,H-72,O-79,z-90,x-88,c-67,f-70,a-65,d-68,w-87,s-83,F11-122,F12-123,*/
            // 判断如果用户按下了回车键（keycody=13）
            if (keyNum === 83) {
                const val = this.AIdata.find((item) => {
                    return item.inIndex === this.currentSuspicious.inIndex + 1;
                });
                if (!!val) {
                    this.$refs.AIFloatingREF.nextSuspicious(val.inIndex);
                } else {
                    this.$message.warning({ message: "已到底" });
                }
            }
            if (keyNum === 87) {
                const val = this.AIdata.find((item) => {
                    return item.inIndex === this.currentSuspicious.inIndex - 1;
                });
                if (!!val) {
                    this.$refs.AIFloatingREF.previousSuspicious(val.inIndex);
                } else {
                    this.$message.warning({ message: "已到顶" });
                }
            }
            if (keyNum === 13) {
                console.log("dayin");
            }
            if (keyNum === 67) {
                this.AIEvaluationDialogShow();
                e.preventDefault();
            }
            if (keyNum === 70) {
                let _this = this;
                if (_this.experimentDialog) {
                    _this.experimentDialog = false;
                    console.log(_this.experimentDialog);
                } else {
                    _this.experimentDialog = true;
                    console.log(_this.experimentDialog);
                    setTimeout(() => {
                        _this.$refs.DiagnosisResultStatisticsComp.refresh();
                    }, 100);
                }
                e.preventDefault();
            }
            if (keyNum === 112) {
                if (this.visibleDict.patienterList) {
                    this.visibleDict.patienterList = false;
                } else {
                    this.patienterListMethod();
                }
                e.preventDefault();
            }

            if (keyNum === 113) {
                console.log(keyNum);
                if (this.visibleDict.patienterDetail) {
                    // this.visibleDict.patienterDetail = false;
                    this.patienterDetailclosed();
                } else {
                    this.activeTabItem = "tabOpinion";
                    this.patienterDetailMethod();
                }
                e.preventDefault();
            }
            if (altKey && keyNum === 49) {
                if (this.visibleDict.patienterDetail) {
                    this.patienterDetailclosed();
                } else {
                    this.activeTabItem = "tabBase";
                    this.patienterDetailMethod();
                }
                e.preventDefault();
            }
            if (!altKey && keyNum === 49) {
                this.$refs.openseadragon.zoomJumpTo(1);
            }
            if (altKey && keyNum === 50) {
                if (this.visibleDict.patienterDetail) {
                    this.patienterDetailclosed();
                } else {
                    this.activeTabItem = "tabPathologyInfo";
                    this.patienterDetailMethod();
                }
                e.preventDefault();
            }
            if (!altKey && keyNum === 50) {
                this.$refs.openseadragon.zoomJumpTo(2);
            }
            if (altKey && keyNum === 51) {
                if (this.visibleDict.patienterDetail) {
                    this.patienterDetailclosed();
                } else {
                    this.activeTabItem = "tabPathologyList";
                    this.patienterDetailMethod();
                }
                e.preventDefault();
            }
            if (!altKey && keyNum === 51) {
                this.$refs.openseadragon.zoomJumpTo(4);
            }
            if (altKey && keyNum === 52) {
                if (this.visibleDict.patienterDetail) {
                    this.patienterDetailclosed();
                } else {
                    this.activeTabItem = "tabOpinion";
                    this.patienterDetailMethod();
                }
                e.preventDefault();
            }
            if (!altKey && keyNum === 52) {
                this.$refs.openseadragon.zoomJumpTo(10);
            }
            if (altKey && keyNum === 53) {
                if (this.visibleDict.patienterDetail) {
                    this.patienterDetailclosed();
                } else {
                    this.activeTabItem = "tabAttachment";
                    this.patienterDetailMethod();
                }
                e.preventDefault();
            }
            if (!altKey && keyNum === 53) {
                this.$refs.openseadragon.zoomJumpTo(20);
            }
            if (altKey && keyNum === 54) {
                if (this.visibleDict.patienterDetail) {
                    this.patienterDetailclosed();
                } else {
                    this.activeTabItem = "tabDiscussion";
                    this.patienterDetailMethod();
                }
                e.preventDefault();
            }
            if (!altKey && keyNum === 54) {
                this.$refs.openseadragon.zoomJumpTo(40);
            }
            if (keyNum === 32) {
                this.$refs.openseadragon.ifMove();
            }
            if (keyNum === 114) {
                e.preventDefault();
                this.drawerAi();
            }
            if (keyNum === 69) {
                this.rotateRight();
            }
            if (keyNum === 81) {
                this.rotateLeft();
            }
            if (keyNum === 79) {
                this.goHome();
            }
            if (keyNum === 90) {
                // url 中有pDiagnosisType 系统内跳转  没有的话就是从外部跳转使用切片浏览器
                if (this.urlHaspDiagnosisType) {
                    this.diagnosisLast();
                }
            }
            if (keyNum === 88) {
                // url 中有pDiagnosisType 系统内跳转  没有的话就是从外部跳转使用切片浏览器
                if (this.urlHaspDiagnosisType) {
                    this.diagnosisNext();
                }
            }
            if (keyNum === 122) {
                this.sreenFull();
            }
            if (keyNum === 123) {
                if (this.hotkey) {
                    this.hotkey = false;
                } else {
                    this.hotkeyMethods();
                    e.preventDefault();
                }
            }
            if (keyNum === 72) {
                if (this.showleftPic) {
                    this.showleftPic = false;
                } else {
                    this.showleftPic = true;
                }
            }
            if (keyNum === 27) {
                this.newannotations = [];
                this.mark.warning = "";
                this.mark.remark = "";
                this.changeColor = -1;
                this.__clearAllDrawingTools();
                this.$refs.openseadragon.panToggle(true);
            }
            if (keyNum === 9) {
                const index = _.findIndex(this.biopsyList, {
                    id: this.biopsyId,
                });
                if (index < this.biopsyList.length - 1) {
                    this.getAnnotations(
                        this.biopsyList[index + 1].id,
                        this.biopsyList[index + 1].newFilename,
                        this.biopsyList[index + 1].originFilename,
                        this.biopsyList[index + 1].labelUrl
                    );
                    if (index || index == 0) {
                        this.isActive = index + 1;
                    }
                } else {
                    this.getAnnotations(
                        this.biopsyList[0].id,
                        this.biopsyList[0].newFilename,
                        this.biopsyList[0].originFilename,
                        this.biopsyList[0].labelUrl
                    );
                    this.isActive = 0;
                }
            }
        },
        validateForm() {
            let decide = false;
            this.$refs.markRefForm.validate((valid) => {
                if (valid) {
                    decide = true;
                } else {
                    this.activeName = "basicInformation";
                }
            });
            return decide;
        },
        // 收藏 - 改变
        async collectChange() {
            this.changeColor = 35;
            if (!!this.isCollected) {
                const res = await this.$axios({
                    method: "DELETE",
                    url: `/collections/${this.isCollected}`,
                });
                if (res && res.data.code === 200) {
                    this.isCollected = null;
                    this.$message.success("取消收藏成功");
                } else {
                    this.$message.warning("取消收藏失败");
                }
            } else {
                this.onComment();
            }
        },
        onComment: function () {
            var _this = this;
            const h = _this.$createElement;
            _this
                .$msgbox({
                    title: "收藏备注",
                    message: h(
                        "div",
                        {
                            attrs: {
                                class: "el-textarea",
                            },
                        },
                        [
                            h("textarea", {
                                attrs: {
                                    class: "el-textarea__inner",
                                    autocomplete: "off",
                                    rows: 4,
                                    id: "commentContent",
                                },
                                value: _this.commentContent,
                                on: { input: _this.onCommentInputChange },
                            }),
                        ]
                    ),
                    showCancelButton: true,
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    beforeClose: async (action, instance, done) => {
                        if (action === "confirm") {
                            instance.confirmButtonLoading = true;
                            instance.confirmButtonText = "提交中...";
                            const res = await this.$axios({
                                method: "POST",
                                url: `/collections/${this.diagnosisId}?remark=${_this.commentContent}`,
                            });

                            if (res && res.data.code === 200) {
                                this.isCollected = res.data.data.id;
                                this.$message.success("收藏成功");
                            } else {
                                this.$message.warning("收藏失败");
                            }
                            done();
                        } else {
                            done();
                        }
                    },
                })
                .then((action) => { });
        },
        onCommentInputChange() {
            this.commentContent = document.getElementById("commentContent").value;
        },
    },
    // 在beforeDestroy()生命周期内清除定时器：
    beforeDestroy() {
        clearInterval(this.timer);
        this.timerOne = null;
        this.timer = null;
        // 移除监听回车按键
        const _this = this;
        document.removeEventListener("keydown", _this.watchEnter);
        sessionStorage.setItem("sliceAssessStatus", "false");
    },
    computed: {
        reversedLabelUrl() {
            return this.labelUrl;
        },
        sourceUrl() {
            if (this.$route.query.fileName.indexOf("sdpc") >= 0) {
                return `${this.pathologyServiceURL}/images/${this.$route.query.fileName}`;
            }
            return `${this.pathologyServiceURL}/images/${this.$route.query.fileName}.dzi`;
        },
        // dziUrl() {
        //   return `${this.pathologyServiceURL}/images/${this.$route.query.fileName}.dzi`;
        // },
        switchValueScale() {
            return this.switchValue.scale;
        },
        switchValueZoom() {
            return this.switchValue.zoom;
        },
        switchValueMarkLabel() {
            return this.switchValue.markLabel;
        },
        switchValueAIAnalysis() {
            return this.switchValue.AIAnalysis;
        },
        switchValuePatientId() {
            return this.switchValue.patientId;
        },
        switchValueNavigator() {
            return this.switchValue.navigator;
        },
        switchValueDisc() {
            return this.switchValue.disc;
        },
        switchValueNet() {
            return this.switchValue.net;
        },
    },
    watch: {
        switchValueScale(val) {
            let _this = this;
            if (val) {
                _this.$refs.openseadragon.viewer.scalebar({
                    pixelsPerMeter: _this.$refs.openseadragon.pixelsPerMeter,
                });
            } else {
                _this.$refs.openseadragon.viewer.scalebar({
                    pixelsPerMeter: null,
                });
            }
        },
        switchValueZoom(val) {
            let _this = this;
            _this.$refs.openseadragon.zoomSliderShow = val;
        },
        switchValueDisc(val) {
            let _this = this;
            _this.$refs.openseadragon.discShow = val;
        },
        switchValueMarkLabel(val) {
            //this.value = val;
        },
        switchValueAIAnalysis(val) {
            this.drawerAi();
        },
        //done
        switchValuePatientId(val) {
            //this.value = val;
        },
        switchValueNavigator(val) {
            let _this = this;
            _this.$refs.openseadragon.viewer.showNavigator = val;
        },
        switchValueNet(val) {
            let _this = this;
            if (val) {
                _this.$refs.openseadragon.startDrawingGrid();
            } else {
                _this.$refs.openseadragon.stopDrawingGrid();
            }
        },
    },
    created() {
        // this.selectedGrid({
        //   col: 1,
        //   row: 1,
        // });
    },

    mounted() {
        // this.wbClient = new Client(process.env.WEBSORKET_URL);
        // this.collectionDignosis = this.wbClient.subscribe("diagnosis");
        // this.collectionDignosis.addObserve(this.$route.query.userId, (data) => {
        //   console.log("observe", "diagnosis", this.$route.query.userId, data);
        //   if (this.pathologyId !== data.diagnosisId) {
        //     this.getBiopsy(data.diagnosisId);
        //     sessionStorage.setItem("pathologyId", data.diagnosisId);
        //     console.log("pathologyId---", data.diagnosisId);
        //     this.$refs.viewerDiagnosticBasis.init();
        //   }
        // });

        // this.collectionAnnotationImages = this.wbClient.subscribe("annotations");
        this.dictionariesRequest(this.dictionaryMap); // 字典数据获取
        this.expertOpinion(); //获取专家意见

        // 验证用户登陆,登陆后才能操作

        let _this = this;
        this.loading = true;
        this.$axios({
            method: "get",
            url: "/current-user",
            headers: {
                defaultHeader: false,
                authorization: this.$route.query.authorization,
                "Content-Type": "application/x-www-form-urlencoded",
            },
        }).then(
            (res) => {
                if (res && res.data.code === 200) {
                    const user = {
                        id: res.data.data.id,
                        name: res.data.data.name,
                    };
                    this.$store.commit("setUser", user);
                    this.$store.commit("setPropertyGeneral", {
                        key: "authorization",
                        value: this.$route.query.authorization,
                    });
                    jcanvasFactory($, window);
                    this.loading = false;
                    console.log(!this.pathologyId);
                    if (this.pathologyId == "null") {
                        this.qualityEvaluationShow = true;
                        this.visibleDict.isShowSliceInfoStatus = true;
                        this.sliceQualityEvaluateRank();
                        this.getSliceInfoInfo(this.$route.query.biopsyId);
                        this.getBiopsyNoPathologyId();
                    } else {
                        this.getBiopsy(this.pathologyId);
                        this.visibleDict.isShowSliceInfoStatus = false;
                    }

                    this.getBiopsyAssess(this.$route.query.biopsyId);
                    setTimeout(() => {
                        this.findTagName(); //由当时的必须点击一下页面才能执行openseadragon的方法改成了自动点击一下页面
                    }, 1000);
                } else {
                    this.$message.info("用户验证失败");
                    this.$store.commit("setPropertyGeneral", {
                        key: "authorization",
                        value: "",
                    });
                    this.$router.push("/login");
                }
            },
            (err) => {
                this.$message.info(`用户验证失败  ${err.response.data.message}`);
                this.$store.commit("setPropertyGeneral", {
                    key: "authorization",
                    value: "",
                });
                this.$router.push("/login");
            }
        );

        // const angle = this.$refs.openseadragon.getRotation();
        // if (angle) {
        //     this.viewerAngle = angle;
        // }
        this.$store.commit("setPropertyGeneral", {
            key: "authorization",
            value: this.$route.query.authorization,
        });

        const { clientWidth } = document.body;
        const { clientHeight } = document.body;
        // 更新canvas宽高
        $("#drawRectCanvas").attr("width", clientWidth);
        $("#drawRectCanvas").attr("height", clientHeight);
        $("#shadeCanvas").attr("width", clientWidth);
        $("#shadeCanvas").attr("height", clientHeight);
        $("#shadeCanvas").hide();
        $("#drawRectCanvas").hide();
        if (!this.pathologyId) {
            document.removeEventListener("keydown", this.watchEnter);
        }
    },
    destroyed() {
        console.log("destroyed");
        // this.wbClient.close();
    },
};
</script>

<style scoped>
.overlay {
    position: absolute !important;
    /* background-image: linear-gradient(to right, #4F4F4F, #E8E8E8)!important; */
    background: rgba(241, 241, 241, 0.8);
    border-radius: 4px 4px 4px 4px;
    top: 45px;
    right: 0;
    width: 40px;
    z-index: 1;
}

.tool-copy {
    background: rgba(241, 241, 241, 0.8);
    border-radius: 4px 4px 4px 4px;
    width: 100%;
    height: 30px;
}

.divCoordinateColor {
    position: absolute !important;
    background-color: #0b1c2e;
    border-radius: 20px;
    padding: 15px 25px 15px 15px;
    top: 267px;
    right: 45px;
    width: 270px;
    z-index: 4;
}

.divPictureHandle {
    position: absolute !important;
    background-color: #0b1c2e;
    border-radius: 20px;
    padding: 15px;
    top: 227px;
    right: 45px;
    width: 80px;
    z-index: 4;
}

.divMarkLabelHandle {
    position: absolute !important;
    background-color: #0b1c2e;
    border-radius: 20px;
    padding: 15px;
    top: 190px;
    right: 45px;
    width: 80px;
    z-index: 4;
}

.divSettingSwitch {
    position: absolute !important;
    background-color: #0b1c2e;
    border-radius: 20px;
    padding: 15px;
    top: 300px;
    right: 45px;
    width: 110px;
    z-index: 4;
}

.openSeadragon {
    float: left;
    border: solid 1px #38526a;
    position: relative;
    top: 45px;
    height: calc(100vh - 60px);
}

.tool-bar1 {
    width: 30px;
    float: left;
    cursor: pointer;
    color: #49b9ad;
    padding-left: 10px;
    padding-bottom: 10px;
    padding-top: 5px;
    display: flex;
    align-items: center;
}

.tool-bar3 {
    float: left;
    cursor: pointer;
    color: #49b9ad;
    padding-left: 5px;
    padding-bottom: 10px;
    padding-top: 5px;
    display: flex;
    align-items: center;
}

.tool-bar2 {
    float: left;
    text-align: center;
    cursor: pointer;
    color: #49b9ad;
    margin: 6px;
    width: 28px;
}

.tool-bar2-copy {
    position: relative;
    float: left;
    text-align: center;
    cursor: pointer;
    color: #49b9ad;
    margin: 5px;
    width: 62px;
    border-radius: 5px;
}

.tool-bar-degree {
    float: left;
    text-align: center;
    cursor: pointer;
    color: #fff;
    padding-right: 3px;
    padding-top: 3px;
}

.cut-line {
    display: inline;
    float: left;
    margin-right: 1.3%;
    background: #fff;
    width: 100%;
    height: 1px;
    display: flex;
    align-items: center;
    text-align: center;
}

.cut-line-copy {
    display: inline;
    float: left;
    background: #fff;
    width: 2px;
    height: 30px;
    display: flex;
    align-items: center;
    text-align: center;
}

.red {
    color: #fff;
    background-color: #49b9ad;
}

::v-deep .el-switch__label {
    color: #49b9ad;
}

.dialog {
    width: 65%;
    height: 130px;
    margin-bottom: 2%;
    position: absolute;
    bottom: 1px;
    left: 17%;
    z-index: 1;
    background: rgba(0, 0, 0, 0.2);
    overflow-x: auto;
    border-top-right-radius: 18px;
    border-top-left-radius: 18px;
}

.F3info {
    width: 65%;
    line-height: 30px;
    /* height: 30px; */
    position: absolute;
    bottom: 120px;
    left: 17%;
    z-index: 1;
    font-weight: bold;
    font-size: 20px;
    height: 20px;
}

.quality-evaluation {
    padding-left: 15px;
    width: 80%;
    height: 80px;
    position: absolute;
    bottom: 10px;
    left: 19%;
    z-index: 1;
}

.liImg {
    width: 80px;
    height: 80px;
    float: left;
    margin-right: 10px;
    position: relative;
}

.dialog ul li {
    list-style: none;
}

.dialog ul {
    overflow: hidden;
}

.dialog li {
    float: left;
}

.active1 {
    box-shadow: 0px 0px 3px 2px #808080;
    width: 200px;
    background-color: rgba(102, 102, 102, 0.3);
    color: #fafafa;
    z-index: 1;
    position: fixed;
    bottom: 200px;
    border-radius: 5px;
    padding: 10px;
}

.leftPic {
    height: 900px;
    overflow: auto;
    top: 50px;
    border: 0;
    padding: 0;
    position: absolute;
    left: 0;
    bottom: 0;
    touch-action: none;
    opacity: 0.8;
    z-index: 1;
}

.rightLable {
    position: fixed;
    top: 46px;
    right: 246px;
    opacity: 0.8;
    z-index: 1;
}

.keyword {
    font-size: 12px;
    color: #f78989;
    margin-left: 21px;
    position: absolute;
    top: 5px;
}

.updateInfo {
    box-shadow: 0 0 3px 2px #808080;
    width: 200px;
    background-color: rgba(102, 102, 102, 0.3);
    color: #fafafa;
    z-index: 12;
    margin-left: 19%;
    position: fixed;
    bottom: 200px;
    border-radius: 5px;
}

.annPicUserName {
    position: absolute;
    top: 80px;
    left: 0;
    width: 80px;
    color: #fafafa;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#drawRectCanvas {
    position: absolute;
    z-index: 500;
    left: 0;
    top: 0;
    cursor: crosshair;
}

#shadeCanvas {
    position: absolute;
    z-index: 250;
    left: 0;
    top: 0;
}

#canvasToolbar {
    width: 104px;
    position: absolute;
    z-index: 1000;
    display: none;
    height: 26px;
    background: white;
}

#canvasToolbar .error {
    color: rgb(232, 30, 53);
    font-size: 13px;
}

#canvasToolbar .check {
    font-size: 13px;
    margin-right: 5px;
    color: rgb(73, 203, 95);
}

#canvasToolbar .canvasButton {
    margin-left: 1px;
    margin-top: 3px;
    cursor: pointer;
    width: 50px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    float: left;
}

#canvasToolbar .canvasButton:hover {
    border: 1px solid #ccc;
}

.colorStatus {
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    border-radius: 20px;
}

.greenStatus {
    background-color: green;
}

.redStatus {
    background-color: red;
}

.greyStatus {
    background-color: grey;
}

.yesActive {
    margin-bottom: 2%;
    border: solid 3px red;
    cursor: pointer;
    position: relative;
    width: 200px;
    height: 115px;
}

.noActive {
    margin-bottom: 2%;
    border: solid 1px green;
    cursor: pointer;
    position: relative;
    width: 200px;
    height: 115px;
}

.height40 {
    height: 40px;
    line-height: 40px;
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
    width: auto;
}

::v-deep .el-input-group__append {
    padding: 0 10px;
    width: 10px;
}

::v-deep .divCoordinateColor .el-slider__runway {
    background-image: linear-gradient(to right, #83d2ff, #e6a2ff);
}

.juzhong {
    display: inline-block;
    vertical-align: middle;
    line-height: 40px;
    margin-left: 25px;
}

.red-color {
    color: red;
}

#ruler-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 诊断详情X号颜色 */
::v-deep .diagnosisDetailClose .el-dialog__headerbtn .el-dialog__close {
    font-weight: bold;
}

::v-deep .diagnosisDetailClose .el-dialog__headerbtn .el-dialog__close::before {
    font-size: 24px;
}

::v-deep .el-dialog {
    margin-top: 100px !important;
}

::v-deep .el-image-viewer__close {
    color: #fff;
}</style>
